多张图片上下顺序java代码_UMeditor控制多张图片上传顺序

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

估计是考虑到上传性能，官方没有提供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 = newFormData();

fd.append(editor.options.imageFieldName|| 'upfile', file, file.name || ('blob.' + file.type.substr('image/'.length)));

fd.append('type', 'ajax');var xhr = newXMLHttpRequest();

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

};

View Code

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

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;

}

};

View Code