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插件，我踩得坑