<div id="filePicker">选择图片</div>
如上所示的html,在初始化之后会变成如下
<div id="filePicker" class="webuploader-container">
<div class="webuploader-pick">选择图片</div>
<div id="rt_??" style="position: absolute; top: 0px; left: 0px; width: 78px; height: 34px; overflow: hidden; bottom: auto; right: auto;">
<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
<label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
</div>
</div>
此时表现一切正常,但是……
如果filePicker这个div自身或者其所处的容器是不可见的,在初始化过程中会因为取不到宽高,导致id未rt_开头的div的宽高只有1px × 1px,其子元素label也就只有1px × 1px的情况。
<div id="filePicker" class="webuploader-container">
<div class="webuploader-pick">选择图片</div>
<div id="rt_??" style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; overflow: hidden; bottom: auto; right: auto;">
<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
<label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
</div>
</div>
label是作为一个透明的遮罩层存在,并且监听了点击事件再转而触发其兄弟元素input的点击的。而一个只有1px × 1px大小的遮罩层,基本上是不可能被用户点击到了,可以预想到的后果:一脸懵逼“咋点了没反应?”
随便拍脑袋想想,解决方案可以有好多:
一、延迟初始化,在容器第一次设置为可见之后再初始化
二、在容器可见之后重置其样式
在不急动手,看了会源码和文档之后,发现有提供refresh方法,那就简单了,在容器可见后refresh一下即可
$.each(uploadBtnArray, function(index, el){
el.refresh();
});