[ WebUpload ] WebUpload 插件初始化问题

WebUpload 插件初始化问题

本文主要针对WebUpload 文件上传插件在初始化多个时，插件自定义按钮显示位置错位导致点击失效的问题提供解决方案。（亦可描述为webupload插件在父容器display属性为none的情况下初始化位置异常）

官网

目录

WebUpload 插件初始化问题
目录
实际案例
源码分析
参考
感谢
实际案例

1、基于avalon开发的前端界面

ms-if =”布尔表达式” 为true，表示生成下方页面文本；反之，不生成

ms-visible=”布尔表达式” 为true，表示显示下方页面文本（display:block）；反之，不显示（display:none）

2、解决方法

初始化前先利用ms-if显示webuploader绑定的容器部分，再执行初始化方法 

或者利用ms-if每次动态生成页面部分代码，再执行初始化方法 

利用ms-visible控制显隐，结合数组array接收Webuploader.create({…})生成的插件对象，在界面显示后（display:block），利用循环执行uploader内部函数refresh();
前两种方法相似，只是控制动态生成的文本域不同 
第三种最优，利用webuploader内置函数refresh函数，对于界面资源利用更佳 
核心是初始化在dom显示之后执行，否则，refresh函数需要dom显示之后执行！
 /**
 * 预案资源文件管理
    */
   RES_MAN: {
       /**
        * 初始化
        */
       init: function () {
           this.createWebUploader(0);
           this.createWebUploader(1);
       },
       /**
        * webUoloader对象容器
        */
       uploader: [],
       /**
        * 文件资源ID
        */
       resId:[],
       /**
        * 创建文件上传容器
        */
       createWebUploader: function (index) {
           var resMan = this;
           var dropBox = $('#' + 'uploadBox' + index);
           var ipt = $('#' + 'filePicker' + index);
           resMan.uploader[index] = WebUploader.create({

               // 选完文件后，是否自动上传。
               auto: true,

               // swf文件路径
               swf: capsule.stringUtil.addPreUrl("/js/lib/webuploader/dist/Uploader.swf"),

               //指定Drag And Drop拖拽的容器
               dnd: $('#' + 'uploadBox' + index),

               // 文件接收服务端。
               server: capsule.stringUtil.addPreUrl("/data/plan/main/uploadPlanFile",{type:index}),

               // 选择文件的按钮。可选。
               // 内部根据当前运行是创建，可能是input元素，也可能是flash.
               pick: ipt,

               accept: {// 只允许选择图片文件。
                   title: 'Images',
                   extensions: 'jpg,jpeg,png',
                   mimeTypes: 'image/jpg,image/jpeg,image/png'//修改这行,优化选择文件界面开启效率
               },
               // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
               resize: false
           });
        //其他事件监听
       },
       //其他界面样式控制
       ...
       /**
        * 刷新布局定位
        */
       refresh:function(){
           $.each(this.uploader,function(i,plugin){
               plugin.refresh();
           });
       }

源码分析

对于display:none的dom元素,offset方法获取到的值如下：

由于界面一开始是隐藏状态进行初始化的，界面初始化两个插件后：

由于绝对定位导致的的相对定位生成差异 
两个按钮虽然css属性一样，确并没有重叠，细致的原因未去研究，有兴趣的可以看下css绝对的定位相关的介绍 

可以看到，两个插件自动生成的offset都是0，采用上述方案优化js逻辑后：

建议
1、如果js逻辑没有问题，但是问题依然没有解决，本人遇到的是由于avalon渲染需要时间导致的，因此加了个延时，确保dom渲染完毕，再执行refresh方法即可 
2、对于每次初始化控件，对界面资源的使用略显浪费，建议控制显示和隐藏，在界面初始加载的时候进行webuploader插件的初始化，初始化完毕后，点击显示后，利用延时确保dom渲染完毕后遍历uplader[]，执行refresh，重新定位更佳。

/**
 * 确保下载容器display属性不为none
 */
 setTimeout(function(){
     PageHelper.RES_MAN.refresh();
 },1000);

参考

WebUploader初始化时的缺陷及处理方法 
webuploader插件，我踩得坑