多张图片上传的顺序,受到用户使用习惯、插件上传和插件插入页面顺序的影响。

  估计是考虑到上传性能,官方没有提供UMeditor控制展示顺序的配置。在上传过程中,用户点击拖动的第一张图片,将作为文件数组中的第一张图片。上传过程中是按照文件的倒序进行的。由于网络和文件大小的原因,会造成各个文件上传所消耗的时间各不一样。从而服务器响应的时间有所不同。UMeditor插入图片的节点也会不同。

  同时,我还发现,及时服务器顺序响应,UMeditor插入图片也不是按时间先后来的。

  由此,为了达到控制顺序的效果。首先,需要用户在做批量上传的时候,点击第一张图片拖动到上传区域。其次,需要修改两处代码。

1. 取消文件的倒序上传方式,改为顺序上传;

2. 缓存上传结果,当完成上传的时候,一起插入到页面。

不足:其中一个文件存在异常时,不会插入已经上传的图片。

var me = this, orderLen, orderFileObject = [];

  1. var me = this, orderLen, orderFileObject = [];
  2.  
  3. me.setOpt('pasteImageEnabled', true);
  4. me.setOpt('dropFileEnabled', true);
  5. var sendAndInsertImage = function (file, editor) {
  6. //模拟数据
  7. var fd = new FormData();
  8. fd.append(editor.options.imageFieldName || 'upfile', file, file.name || ('blob.' + file.type.substr('image/'.length)));
  9. fd.append('type', 'ajax');
  10. var xhr = new XMLHttpRequest();
  11. xhr.open("post", me.options.imageUrl, true);
  12. xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
  13. xhr.addEventListener('load', function (e) {
  14. try {
  15. var json = eval('('+e.target.response+')'),
  16. link = json.url,
  17. picLink = me.options.imagePath + link;
  18. // editor.execCommand('insertimage', {
  19. // src: picLink,
  20. // _src: picLink
  21. // });
  22. // 缓存数据
  23. orderFileObject.push(
  24. {
  25. src: picLink,
  26. _src: picLink
  27. }
  28. );
  29.  
  30. // 当上传完毕时,插入图片
  31. if (orderFileObject.length === orderLen) {
  32. editor.execCommand('insertimage', orderFileObject);
  33. }
  34. } catch (er) {
  35. }
  36. });
  37. xhr.send(fd);
  38. };
  1. if (window.FormData && window.FileReader) {
  2. var autoUploadHandler = function (e) {
  3. var hasImg = false,
  4. items;
  5. //获取粘贴板文件列表或者拖放文件列表
  6. items = e.type == 'paste' ? getPasteImage(e.originalEvent) : getDropImage(e.originalEvent);
  7. if (items) {
  8. var len = items.length, i = 0,
  9. file;
  10. // 初始化数据
  11. orderLen = len;
  12. orderFileObject = [];
  13.  
  14. while (i < len) {
  15. file = items[i++];
  16. if (file.getAsFile) file = file.getAsFile();
  17. if (file && file.size > 0 && /image\/\w+/i.test(file.type)) {
  18. sendAndInsertImage(file, me);
  19. hasImg = true;
  20. }
  21. }
  22. if (hasImg) return false;
  23. }
  24.  
  25. };

UMeditor控制多张图片上传顺序的更多相关文章

  1. ASP.NET 5探险(3):使用UMEditor并实现图片上传

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:今天将继续上一篇来讲解百度富文本Web编辑器UEditor或UMEditor的使用. ...

  2. 微信小程序多张图片上传

    微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api ...

  3. js移动端/H5同时选择多张图片上传并使用canvas压缩图片

    最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...

  4. H5单张、多张图片上传

    前言 今天我们聊一聊图片上传,单张Or多张 ,如今,各大图片上传插件数不胜数,例如:Jquery的 verupload.js,jQuery File Upload.Uploadify.jQuery.f ...

  5. nodejs-使用multer实现多张图片上传,express搭建脚手架

    nodejs-使用multer实现多张图片上传,express搭建脚手架 在工作中,我们经常会看到用户有多张图片上传,并且预览展示的需求.那么在具体实现中又该怎么做呢? 本实例需要nodejs基础,本 ...

  6. JavaScript实现多张图片上传功能

    今天闲着没事,把之前的多张图片上传代码整理了下. 页面主要代码: <div class="upBox upBox2"> <div class="d1&q ...

  7. 用原生JS实现多张图片上传及预览功能(兼容IE8)

    最近需要做一个图片上传预览的功能(兼容IE8-11.chrome.firefox等浏览器),网上现有的文件上传组件(如webuploader)总是会遇到一些兼容性问题.于是我参考了一些博文(链接找不到 ...

  8. 微信小程序:多张图片上传

    最近在写小程序的相册,需要多张图片的上传.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求+借鉴网上各位大神的案例,总算搞定.分享下,不足之处,多多指教哦 页面wxml: <form ...

  9. 基于HTML5的多张图片上传

    图片上传之前也有写过demo,不过是单张上传的,最近有个业务需求是需要多张上传的,于是乎从新改写了一下 HTML结构: 1 2 3 4 <div class="container&qu ...

随机推荐

  1. BZOJ2339[HNOI2011]卡农——递推+组合数

    题目链接: [HNOI2011]卡农 题目要求从$S=\{1,2,3……n\}$中选出$m$个子集满足以下三个条件: 1.不能选空集 2.不能选相同的两个子集 3.每种元素出现次数必须为偶数次 我们考 ...

  2. Golang 介绍与安装

    1.介绍与安装 Golang 是什么 Go 亦称为 Golang(按照 Rob Pike 说法,语言叫做 Go,Golang 只是官方网站的网址),是由谷歌开发的一个开源的编译型的静态语言. Gola ...

  3. os与sys模块

    os 1.os.pardir #获取当前目录的父目录字符串名:('..') 2.os.mkdir('dirname') #创建单级目录:相当于shell中mkdir dirname 3.os.make ...

  4. 题解:LOJ540游戏

    题目描述 小L计划进行n场游戏,每场游戏使用一张地图,小 L 会同时使用三辆车在该地图上完成游戏. 小 L 的赛车有三辆,分别用大写字母 A.B.C 表示.地图是一张无向简单图(没有重边或自环),每次 ...

  5. PEP8 - Python编码规范

    PEP8 - Python编码规范 PEP8 规范 官方文档:https://www.python.org/dev/peps/pep-0008/ PEP8 规范 中文翻译:http://www.cnb ...

  6. Java 8 特性 —— 默认方法和静态方法

    Java 8 新增了接口的默认方法.简单说,默认方法就是接口可以有实现方法,而且不需要实现类去实现其方法.我们只需在方法名前面加个 default 关键字即可实现默认方法. 为什么要有这个特性?之前的 ...

  7. CF 1145 (愚人节比赛)

    D题 题目就是让你找出题面中拼错的单词,拼错的字母组合成一句话就是正确的题面. two plus xor of third and min elements #include<bits/stdc ...

  8. python 内置函数详解

    懒得写了  参考1:https://www.cnblogs.com/xiao1/p/5856890.html 参考2:https://www.runoob.com/python/python-buil ...

  9. netty的简单的应用例子

    一.简单的聊天室程序 public class ChatClient { public static void main(String[] args) throws InterruptedExcept ...

  10. Mysql 根据一个表数据更新另外一个表

    方法一: update 更新表 set 字段 = (select 参考数据 from 参考表 where  参考表.id = 更新表.id); update table_2 m set m.colum ...