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 = 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;
                }

            };