zoukankan      html  css  js  c++  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 = 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);
        };
    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 < 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;
                    }
    
                };
    View Code
  • 相关阅读:
    camp训练day2
    LCA板子题
    牛客多校第一场
    P1063 能量项链 区间DP
    64. Minimum Path Sum
    46. Permutations
    216. Combination Sum III
    62. Unique Paths
    53. Maximum Subarray
    22. Generate Parentheses
  • 原文地址:https://www.cnblogs.com/javawer/p/5643941.html
Copyright © 2011-2022 走看看