多张图片上传的顺序,受到用户使用习惯、插件上传和插件插入页面顺序的影响。
估计是考虑到上传性能,官方没有提供UMeditor控制展示顺序的配置。在上传过程中,用户点击拖动的第一张图片,将作为文件数组中的第一张图片。上传过程中是按照文件的倒序进行的。由于网络和文件大小的原因,会造成各个文件上传所消耗的时间各不一样。从而服务器响应的时间有所不同。UMeditor插入图片的节点也会不同。
同时,我还发现,及时服务器顺序响应,UMeditor插入图片也不是按时间先后来的。
由此,为了达到控制顺序的效果。首先,需要用户在做批量上传的时候,点击第一张图片拖动到上传区域。其次,需要修改两处代码。
1. 取消文件的倒序上传方式,改为顺序上传;
2. 缓存上传结果,当完成上传的时候,一起插入到页面。
不足:其中一个文件存在异常时,不会插入已经上传的图片。
var me = this, orderLen, orderFileObject = [];

var me = this, orderLen, orderFileObject = []; me.setOpt('pasteImageEnabled', true); me.setOpt('dropFileEnabled', true); var sendAndInsertImage = function (file, editor) { //模拟数据 var fd = new FormData(); fd.append(editor.options.imageFieldName || 'upfile', file, file.name || ('blob.' + file.type.substr('image/'.length))); fd.append('type', 'ajax'); var xhr = new XMLHttpRequest(); xhr.open("post", me.options.imageUrl, true); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhr.addEventListener('load', function (e) { try { var json = eval('('+e.target.response+')'), link = json.url, picLink = me.options.imagePath + link; // editor.execCommand('insertimage', { // src: picLink, // _src: picLink // }); // 缓存数据 orderFileObject.push( { src: picLink, _src: picLink } ); // 当上传完毕时,插入图片 if (orderFileObject.length === orderLen) { editor.execCommand('insertimage', orderFileObject); } } catch (er) { } }); xhr.send(fd); };

if (window.FormData && window.FileReader) { var autoUploadHandler = function (e) { var hasImg = false, items; //获取粘贴板文件列表或者拖放文件列表 items = e.type == 'paste' ? getPasteImage(e.originalEvent) : getDropImage(e.originalEvent); if (items) { var len = items.length, i = 0, file; // 初始化数据 orderLen = len; orderFileObject = []; while (i < len) { file = items[i++]; 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; } };