解决WebUploader 选择文件按钮点击无效问题

大兄弟 2018年07月21日0   428

由于业务需要,必须对选择文件的按钮进行隐藏,等点击后再显示出来。但先隐藏后Webuploader获取不到靶子按钮的宽高了。本来想通过css父子关系进行调整,发现并不凑效。后来通过百度找到了解决方法。


以下参考网上资料:

问题的原因大体是这样,WebUploader初始化的时候,封装了一个input,type=‘file’。

浏览文件按钮实现原理是一个透明的层,点击这个层会触发点击事件,如果在WebUploader初始化的时候,因为各种原因导致它动态获取的元素大小有问题,

比如说网上一个网友的说法,初始化的时候因为获取不到正确的自身或者容器的大小,这时候初始化出来的这个透明层的大小就会是1px*1px,这么小的层,根本点不到。

所以也就触发不了点击事件。

我这里出现这个问题的最终原因是我上传所使用的div层,设置了隐藏属性。我使用的display:none来设置的隐藏。(我的也是这样)

经过测试,WebUploader的浏览文件点击无效(但是重新渲染一下就可以点击,比如说按下F12)和这个display:none属性有关系。

问题原因找到了,就好解决了,元素的隐藏显示不用display,使用css控制。问题解决。

[css] view plain copy { display: none; / 不占据空间,无法点击 / } 
/****
{ visibility: hidden; / 占据空间,无法点击 / } 
/****
{ position: absolute; top: -999em; / 不占据空间,无法点击 / } 
/****
{ position: relative; top: -999em; / 占据空间,无法点击 / } 
/****
{ position: absolute; visibility: hidden; / 不占据空间,无法点击 / } 
/****
{ height: 0; overflow: hidden; / 不占据空间,无法点击 / } 
/****
{ opacity: 0; filter:Alpha(opacity=0); / 占据空间,可以点击 / } 
/****
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); / 不占据空间,可以点击 / } 
/****

zoom: 0.001; 
-moz-transform: scale(0); 
-webkit-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 
/ IE6/IE7/IE9不占据空间,IE8/FireFox/Chrome/Opera占据空间。都无法点击 

/****

position: absolute; 
zoom: 0.001; 
-moz-transform: scale(0); 
-webkit-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 
/ 不占据空间,无法点击 
}