webUploader上传图片插件一个页面多个实例多处使用
版权声明：
本文为博主原创文章，转载请声明原文链接...谢谢。o_0。
更新时间：
2016-11-22 09:27:02
温馨提示：
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
使用webuploader插件的时候在一个页面中使用一个是没有问题的但使用两个以上就会出现点击没有反应使用不了的情况
如图所示,第一个点击没有反应
每个实例插件会创建file表单如下代码
<div id="rt_rt_1auu1ph391eek20k1gsp149r1grn1" style="position: absolute; top: -264px; left: 219.5px; width: 168px; height: 45px; overflow: hidden; bottom: auto; right: auto;"> <input type="file" name="file" class="webuploader-element-invisible" accept="image/*"> <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"> </label> </div>
上面所示代码,下面全都以 file表单 简称
插件创建后肯定会在网页中添加file表单元素,查看页面元素后发现创建第一个实例后点击选择图片这个按钮下面没有file表单,实际上插件是创建啦file表单的,如图
只不过这个file表单元素在最下面,不在他应该在的地方
而第二上上传实例是正常的,如下图，我们看下正常情况下file表单这些代码应该是在哪个地方
如上图正常情况下是在你添加的上传按钮表单下面紧挨着就是这个file表单元素
另外正常情况下上传按钮的父元素还有个webuploader-container这个类，如下图
第二个正常的webuploader实例
第一个不正常的webuploader实例
经过分析发现webuploader创建实例后会添加一些你设置的上传按钮的html代码,但是添加file表单元素并不是同步添加的,可能是在一个回调函数里添加的,我没有细找在哪添加的。
下面说下解决方法
每次创建webuploader的实例时加一个延时函数,或着每创建一个实例就记录下来然后再创建的时候检测下页面中的file表单是不是跟实例数量一样,file表单里都有一个webuploader-element-invisible这样的类名
<input type="file" name="file" class="webuploader-element-invisible" accept="image/*">
如果数量一样就创建下一个
setTimeout(function(){ WebUploader.create();},3000);每次创建的时候延时3秒种
