21
Jan

利用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>的情况也会出现失效的情况


About Me

Nothing is impossible!

Friends
倩倩的网站儿子的网站丽丽
CATEGORIES
Tags
Beatles想像冰雪奇缘北京编程SSL证书认知障碍Docker春天行政区域名列表域名体系nginxopen_basedir思维指令编程语言程序URL网站上线域名FTP云服务器搜索引擎JSCSS网页超链接聚合内容列表元素网页构成网站的构成网站的分类网站单标签HTML第一个网页简单网页博域科技2018香山春游AJAX字体PHP升级
Copyright©2022 王阳 版权所有  京ICP备14005672号-6