参考: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. popcorn-js视频Video框架简单用法

    <div> <video class="video" id="ourvideobig" preload="auto" co ...

  2. (四)网格(dataGrid)

    一.普通网格 前端index.jsp <%@ page language="java" contentType="text/html; charset=UTF-8& ...

  3. SQL Server 2017命令创建新账户(test-user),并分配数据库权限

    -- 1. 创建登录账号USE [master];GOCREATE LOGIN [test-user] WITH PASSWORD = 'xysu7SZ193SNX6E{{HxubPE3}vr',DE ...

  4. Abp 领域事件简单实践 <二>

    上一篇说的是仓储增删改 的时候会自动触发领域事件. 其实也可以随时触发. 现在在应用层触发. 应用层依赖注入 EventBus public void Trigger() { var e = new ...

  5. Go part 4 数据容器(数组,slice,string,map,syncMap,list)

    数组 数组是值类型,因此改变副本的值,不会影响到本身 数组的定义:var 变量名 [元素数量] T 变量名(符合标识符要求即可) 元素数量(整型,可以是const中的值) T(可以是任意基本类型,包括 ...

  6. 关于linux中关在共享文件的NFS 提示错误解决办法

    0. 查看挂载情况命令 : findmnt 1. 如果在客户机上遇到如下这样的提示错误,有可能的原因是因为没有安装nfs-utils   只需要yum install nfs-utils   就解决了 ...

  7. input 默认提示文字 样式修改(颜色,大小,位置)

    input::-webkit-input-placeholder{ color:red; font-size:20px; ...... }

  8. Python 遍历文件夹清理磁盘案例

    import os suffix_name_list = [".pdb", ".ilk"] def find_file(path): # 遍历文件夹 for i ...

  9. SAP官方发布的ABAP编程规范

    最近有朋友在公众号后台给我留言,"Jerry啊,你最近写的都是一些SAP研究院里面用到的新技术,能不能写点SAP传统的开发技术比如ABAP相关的东西"? 其实Jerry在刚开始写这 ...

  10. redis集群1

    redis-trib.rb命令详解   redis-trib.rb是官方提供的Redis Cluster的管理工具,无需额外下载,默认位于源码包的src目录下,但因该工具是用ruby开发的,所以需要准 ...