利用WebUploader实现上传图片编辑回显与拖拽排序

　　这几天改进威迈二的时候，利用WebUploader文件上传组件造了一个新的系统字段，解决了多图片上传回显编辑和拖动排序问题，大大增强了威迈二的使用体验

　　网上找到的关于WebUploader编辑回显存在一定问题，其中比较关键的问题是回显时是乱序的，下面这些读取加载FILE对象是可用的：

            var getFileBlob = function (url, cb) {
                var xhr = new XMLHttpRequest();
                xhr.open("GET", url);
                xhr.responseType = "blob";
                xhr.addEventListener("load", function() {
                    cb(xhr.response);
                });
                xhr.send();
            };
             
            var blobToFile = function (blob, name) {
                blob.lastModifiedDate = new Date();
                blob.name = name;
                return blob;
            };
             
            var getFileObject = function (filePathOrUrl, cb) {
                getFileBlob(filePathOrUrl, function (blob){
                    filename=filePathOrUrl.substring(filePathOrUrl.lastIndexOf("/")+1);
                    cb(blobToFile(blob,filename));
                });
            };

　　然而接下来循环读取图片路径数组来获得图片对象，并试图用个sleep函数延迟来保证原来的排序的方式经过测试出现了大问题，一个是仍不能保证原来的排序，另一个是经常性的缺失图片没有加载成功甚至出现卡顿！这里我改成了一个函数，并支持了图片文字标题，为啥改为函数，是因为后面要利用到，正确的代码如下：

            var pictures = [....];//图片路径数组
            var pictitle = [....];
            var loadEdit = function (url, alt="") {
                getFileObject(url, function (fileObject) {
                    var wuFile = new WebUploader.Lib.File(WebUploader.guid("rt_"), fileObject);
                    var file = new WebUploader.File(wuFile);
                    file.setStatus("complete");
                    uploader.addFiles(file);
                    alt = alt && alt != "undefined" ? alt : file["name"];
                    $('#' + file.id).append('<input type="hidden" name="pic_url[]" value="'+url+'" /><input type="hidden" name="pic_alt[]" value="'+alt+'" /><input type="hidden" name="pic_size[]" value="'+file['size']+'" />');
                    $("input[name=\'tit_"+file.id+"\']").val(alt);
                })
            };
            //加载第一个图片
            loadEdit(pictures[0], pictitle[0]);

　　这里我为了保证顺序只加载了第一个图片，后面的图片利用WebUploader的filesQueued方法来循环添加，这样绝对保证顺序：

            // 当有文件添加进来的时候
            uploader.on( "filesQueued", function ( file ) {
                var liNum = $(".filelist li").length;
                if (liNum == pictures.length) {
                    console.log("载入拖动排序！此刻LI数量：", $(".filelist li").length);
                    $(".filelist").dragsort({ 
                        dragSelector: "li", 
                        dragSelectorExclude: "span,input",
                        dragBetween: false, 
                        dragEnd: saveOrder, 
                        placeHolderTemplate: "",
                        scrollSpeed: 5,
                    });
                } else if (liNum < pictures.length){
                    loadEdit(pictures[liNum], pictitle[liNum]);
                }
            });

　　因为打开页面加载了第一个，加载完第一个后触发filesQueued，马上判断li的数量和图片路径数组是否相符，相符则激活拖拽排序，不相符的话如果是还不够，那就继续调用loadEdit加载，这样就保证了顺序。无论咋样，拖拽的dragsort组件加载只执行一次，最后的效果很理想。

　　关于jQuery List DragSort这个拖拽组件真的非常好用，但要注意几个问题：

首先只能加载一次，如果多次重复加载那个拖拽就没法看了

其次注意列表标签别掺杂其他标签，比如一般<ul><li>...</li><li>...</li></ul>这样，非要在<li>的兄弟节点中用<a><div>之类，那会导致组件直接失效

最后我在实践中是<ul>和<li>使用，缺少<ul>的情况也会出现失效的情况