参考: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. 十二、使用PWM调整LCD背光亮度

    和手机一样,开发板中也带有调整背光亮度的功能. 调整背光亮度依赖于PWM,它通过调节脉冲宽度来控制背光亮度,此方式需要使用PWM驱动.本章将对其进行讲解. 一.用户空间调整背光亮度 一般应用程序可以通 ...

  2. go if 判断 完成随机分数的评级

    1 go中 所有的大括号要跟在 当前语句的后面不能换行 例如: if a>0  { func getUser(){ for { 2关于随机分数的生成 种子的设置放到循环中会是重复的数字,这是可以 ...

  3. Yii2.0 RESTful API 之速率限制

    Yii2.0 RESTFul API 之速率限制 什么是速率限制? 权威指南翻译过来为限流,为防止滥用,你应该考虑对您的 API 限流. 例如,您可以限制每个用户 10 分钟内最多调用 API 100 ...

  4. 【贪心】洛谷2019 OI春令营 - 普及组 作业

    [P3817 小A的糖果 小A有N个糖果盒,第i个盒中有a[i]颗糖果. 小A每次可以从其中一盒糖果中吃掉一颗,他想知道,要让任意两个相邻的盒子中加起来都只有x颗或以下的糖果,至少得吃掉几颗糖. [贪 ...

  5. shell习题第25题:判断是否开启web服务

    [题目要求] 写一个脚本判断我的linux服务器是否开启web服务?监听80端口 [核心要点] netstat -lntp | grep '80' [脚本] #!/bin/bash n=`netsta ...

  6. MongoDB操作-备份和恢复

    Mongodb数据库操作-备份 恢复 导出 导入 mongodb数据备份和恢复主要分为二种:一种是针对库的mongodump和mongorestore,一种是针对库中表的mongoexport和mon ...

  7. 怎样理解this

    JavaScript里的this, Python里的self, 其实都是一个东西, 它的存在跟构造函数 / 类这种是分不开的, 当然, 也可以在其他场合下使用, 他的意义很多, 但最共通的一个特点是: ...

  8. (十四)角色管理(Ztree插件的基本使用)

    1. 建表 角色表 菜单表 角色-菜单(这个表中的role_id和menuu_id都不能被设置为主键,否则当插入一个新角色的时候,一个角色可能拥有多个菜单(role_id重复),一个菜单可能被多个角色 ...

  9. Python 基础问题大全

    前言 Python现在依托大数据,AI人工智能等等这些最火的项目,俨然已经成为了当下最火的一门编程语言之一. 所以,近来也是有非常非常多的工程师来进修python这么语言. 但是实际上,对于0代码基础 ...

  10. FlowPortal BPM多汇报线的设置及使用

    1.在组织结构中设置多汇报线 2.流程中使用汇报线 3.流程节点上使用汇报线 流程节点默认启用流程中指定的汇报线,若流程中的某个节点需要启用特殊的汇报线,可通过设置节点业务属性实现.