参考:http://blog.ncmem.com/wordpress/2019/08/07/word%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0%e5%88%b0%e6%9c%8d%e5%8a%a1%e5%99%a8/

转载后,简单改编为支持自动上传到服务器

umeditor.js下面代码中:

me.addListener('ready', function () {

if (window.FormData && window.FileReader) {

var autoUploadHandler = function (e) {

debugger;

var hasImg = false,

items;

//获取粘贴板文件列表或者拖放文件列表

items = e.type == 'paste' ? getPasteImage(e.originalEvent) : getDropImage(e.originalEvent);

if (items) {

var len = items.length,

file;

while (len--) {

file = items[len];

if (file.getAsFile) file = file.getAsFile();

if (file && file.size > 0 && /image\/\w+/i.test(file.type)) {

sendAndInsertImage(file, me);

hasImg = true;

}

}

if (hasImg) return false;

}

else{

// word里面的图片不会当做图片,而是text/plain, 用getPasteImage 获取不到

/ /todo 目前只是支持单个图片,不包含文字的,支持图片的,需要再修改下代码。稍等。

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 ) {

if (item.getAsFile) file = item.getAsFile();

var blob = item.getAsFile();

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

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

e.originalEvent.preventDefault();

};

}

}

}

};

me.getOpt('pasteImageEnabled') && me.$body.on('paste', autoUploadHandler);

me.getOpt('dropFileEnabled') && me.$body.on('drop', autoUploadHandler);

//取消拖放图片时出现的文字光标位置提示

me.$body.on('dragover', function (e) {

if (e.originalEvent.dataTransfer.types[0] == 'Files') {

return false;

}

});

}

});

word图片上传到服务器的更多相关文章

  1. ckeditor如何能实现直接粘贴把图片上传到服务器中?

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  2. MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】(八) ASP.NET MVC 图片上传到服务器

    MVC图片上传.浏览.删除   1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...

  3. php form 图片上传至服务器上

    本文章也是写给自己看的,因为写的很简洁,连判断都没有,只是直接实现了能上传的功能. 前台: <form action="upload.php" method="PO ...

  4. 使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,

    一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...

  5. java+Word图片上传控件

    这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下) ...

  6. 根目录97 <input file>标签,把图片上传到服务器(跟增删改查一起实现)

    首先来个简单的html页面: enctype="multipart/form-data" encoding="multipart/form-data" acti ...

  7. ueditor+word图片上传

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  8. Express+MySQL实现图片上传到服务器并把路径保存到数据库中

    demo准备:mysql5.7.20 express4.0 处理图片文件的中间件Multer 先搭建服务器并展示html页面 const express = require("express ...

  9. hbuilder mui uploader图片上传到服务器完整版(ASP.NET)

    html布局,比较简单,模仿微信的: <div class="dynamic_images"> <ul> <!--<li><img  ...

随机推荐

  1. go 函数闭包

    Go 函数可以是闭包的.闭包是一个函数值,它来自函数体的外部的变量引用. 函数可以对这个引用值进行访问和赋值:换句话说这个函数被“绑定”在这个变量上. 例如,函数 adder 返回一个闭包.每个闭包都 ...

  2. 浅析ARM协处理器CP15寄存器有关指令:MCR\MRC

    ref:http://blog.csdn.net/gameit/article/details/13169405 背景: 在uboot中,start.s中涉及到了 CP15 的有关操作.查阅有关资料, ...

  3. (二十四)JSP标签之基本标签(<jsp:标签名>)

    一.常用标签 1.1 jsp中标签一共有8中,其中常用的有6中,本文将介绍这6种常用的标签. 1.2 6种标签 1. <jsp:include> <jsp:include>标签 ...

  4. redis5.0集群配置

    介绍 redis自3.0版本以来支持主从模式的集群,可用哨兵监控集群健康状态,但这种方式的集群很不成熟,数据备份需要全量拷贝.在之后的版本才真正支持集群分片. 在redis5.0中去除了以redis- ...

  5. 使用隔离级别read committed隐式解决并发冲突

    1.使用rc的弊端:出现不可重复读 Oracle不可重复读 Oracle丢失修改 Oracle幻读 任何数据库的update  insert  delete都加排它锁 sql server的selec ...

  6. C# explicit interface implementation(显式接口实现)

    C# explicit interface implementation 某个类要实现两个包含相同方法名的接口, 应该如何实现这两个方法? namespace ExplicitInterfaceImp ...

  7. 编译 SharpNav 遇到的问题和解决过程

    https://github.com/Robmaister/SharpNav 是github上基于recastnavtigation的一个C#项目. github上并没有详细的编译过程. 首先把项目c ...

  8. mongoose整理笔记

    一:参考学习网址 npm: https://www.npmjs.com/package/mongoose 官网API:http://mongoosejs.com/docs/guide.html 二:在 ...

  9. 根据导入xlxs的文件,来写入数据库

    今天讲解一下上传文件.前台必须保持传参类型"multipart/form-data" 后台可以设定 public static final String MULTIPART_FOR ...

  10. flutter packages get 慢 解决方案

    国内使用 flutter packages get 命令,一直是  This is taking an unexpectedly long time 状态 科.学.上.网.无.效. windows解决 ...