首页 > 编程语言 >PHPMyWind支持PowerPoint上传

PHPMyWind支持PowerPoint上传

时间:2023-02-07 15:25:17浏览次数:57  
标签:PHPMyWind base64 wordpaster blob text var items 上传 PowerPoint

 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码
目前限chrome浏览器使用
首先以um-editor的二进制流保存为例:
打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。
加入下面的代码:

//判断剪贴板的内容是否包含文本

//首先解释一下为什么要判断文本是不是为空

//在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种type(text/plain,text/html,text/rtf,image/png)类型的对象

//为了兼容4种格式的情况,做了如下的判断

//如下代码:e.originalEvent.clipboardData.items获得剪贴板的内容

//当粘贴了文本之后text是不为空的,同时也会返回当前文本的图片类型

//如果有文字的话不做任何的处理,如果只粘贴图片的话文本一定是空的,包括复制的桌面图片或者截图的图片

var text = e.originalEvent.clipboardData.getData("text");

if(text == ""){

    var items=e.originalEvent.clipboardData.items;

     for (var i = 0, len = items.length; i < len; i++) {

        var item = items[i];

       if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {

         

              var blob = item.getAsFile();

              getBase64(blob, function( base64 ) {

              //sendAndInsertImage(base64,me); 上传到服务器

               setBase64Image(base64,me);

              });

              //阻止默认事件, 避免重复添加;

              e.originalEvent.preventDefault();

             };

        }

}

两个方法:

//执行插入图片的操作

function setBase64Image(base64,editor){

    editor.execCommand('insertimage', {src: base64,_src: base64});

}

//获得base64

function  getBase64(blob, callback) {

    var a = new FileReader();

    a.onload = function(e) {callback(e.target.result);};

    a.readAsDataURL(blob);

};

效果展示:

编辑

详细思路及源码

示例下载:

wordpaster-vue3-cli-ueditor1.5wordpaster-vue-ueditor1.5wordpaster-asp.net-ueditor1.5xwordpaster-php-ueditor1xwordpaster-jsp-ueditor1x​

标签:PHPMyWind,base64,wordpaster,blob,text,var,items,上传,PowerPoint
From: https://www.cnblogs.com/zyzzz/p/17098532.html

相关文章

  • JS文件上传
    【Web技术】657-1.8w字|一文了解全过程(进阶必备)https://blog.51cto.com/u_11887782/5997353-----------------------------------前言平常在写业务的时候常常会用的到......
  • PHPMyWind支持PDF粘贴
    ​ 项目需求可发布文章需求涉及到富文本编辑器经过查阅我选择了较为简便不需要后端支持可独立完成的tinymce框架官方文档也是相当完整虽然都是全英文但是有强大的......
  • ElementUI中el-upload文件上传后,编辑时文件回显及重新提交思路
    文件回显后端返回文件名和文件路径重新提交后端返回的文件名和文件路径,仅用于展示新建一个ref为editUpload的el-upload组件,用户没有更换文件(this.$refs.editUpload.up......
  • PHPMyWind支持ppt粘贴
    ​ 自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑......
  • bootstrap4修改文件上传样式
    css[hidden]{display:none!important;} html<labelclass="btnbtn-default"><svgxmlns="http://www.w3.org/2000/svg"width="16"height="16"fi......
  • SpringBoot-超大文件上传-如何上传文件-大文件上传
    ​ 需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制。 第一步......
  • SpringMVC-超大文件上传-如何上传文件-大文件上传
    ​ 我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用。首先我们需要了解的是上传文件三要素:1.表单提交方式......
  • tp5使用layui实现多个图片上传(带附件选择)的方法实例
    tp5使用layui实现多个图片上传(带附件选择),如何加载layui在此不详细说明,有需要可以百度html代码,主要处理都是在jq中,完成方法全部原创,也许不是最简单的,但也能实现效果首页......
  • vue的上传图片
    <!--上传--><inputtype="file"ref="myfile1"@change="readImg1"id="fileImg1">data(){return{url:'',}}readImg1:......
  • ElementUI文件上传及服务器接口配置
    后台服务器的搭建入口文件//server.jsconstexpress=require('express')constapp=express()constPORT=4000//引入路由文件上传对应的路由constupload=requ......