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

项目中使用WebUploader做的视频上传功能，出现一个十分奇怪的问题，点击浏览文件的按钮没有反应。需要按F12才能点击。

最终解决思路：

利用js更改div的大小（自己真正解决问题的方法）：

$('#picker div:eq(1)').attr('style','position: absolute; top: 0px; left: 0px; width: 82px; height: 39px; overflow: hidden; bottom: auto; right: auto;');

我f12查看了html代码，发现id为picker的div下面的第二个div的css在变化，刚出来宽高都是1培px，当我拖动控制台后变成上面的宽高82px，39px，

索性在我点击出现选择文件时立即利用点击事件更改对应div的宽高，更轻松的解决问题，网上说的利用css来隐藏，必须修改之前代码，我不太推荐，觉得麻烦。

---------------------------------------------------------------------------------------------------------------------------------------------------------

以下参考网上资料：

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

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

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

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

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

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

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

[css] view plain copy

1. { display: none; /* 不占据空间，无法点击 */ }   
2. /********************************************************************************/   
3. { visibility: hidden; /* 占据空间，无法点击 */ }   
4. /********************************************************************************/   
5. { position: absolute; top: -999em; /* 不占据空间，无法点击 */ }   
6. /********************************************************************************/   
7. { position: relative; top: -999em; /* 占据空间，无法点击 */ }   
8. /********************************************************************************/   
9. { position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }   
10. /********************************************************************************/   
11. { height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }   
12. /********************************************************************************/   
13. { opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }   
14. /********************************************************************************/   
15. { position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }   
16. /********************************************************************************/   
17. {   
18. zoom: 0.001;   
19. -moz-transform: scale(0);   
20. -webkit-transform: scale(0);   
21. -o-transform: scale(0);   
22. transform: scale(0);   
23. /* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */   
24. }   
25. /********************************************************************************/   
26. {   
27. position: absolute;   
28. zoom: 0.001;   
29. -moz-transform: scale(0);   
30. -webkit-transform: scale(0);   
31. -o-transform: scale(0);   
32. transform: scale(0);   
33. /* 不占据空间，无法点击 */   
34. }