專案中使用WebUploader做的圖片上傳功能，出現一個奇怪的問題，就是頁面第一次載入完成之後，點選瀏覽檔案的按鈕沒有反應。

以下是參考網上的一些說法：

問題的原因大體是這樣，WebUploader初始化的時候，封裝了一個input，type=‘file’。

瀏覽檔案按鈕實現原理是一個透明的層，點選這個層會觸發點選事件，如果在WebUploader初始化的時候，因為各種原因導致它動態獲取的元素大小有問題，

比如說網上一個網友的說法，初始化的時候因為獲取不到正確的自身或者容器的大小，這時候初始化出來的這個透明層的大小就會是1px*1px，這麼小的層，根本點不到。

所以也就觸發不了點選事件。

以上是網上的資料，我想問題的原因差不多就是類似的情況。我是剛接觸WebUploader，沒有深入研究，不過看官網的演示，以及其餘人的實現，這個問題應該已經解決了。

要是還出現這個問題，原因應該是自己頁面的因素比較多。

我這裡出現這個問題的最終原因是我上傳所使用的div層，設定了隱藏屬性。我使用的display:none來設定的隱藏。

經過測試，WebUploader的瀏覽檔案點選無效（但是重新渲染一下就可以點選，比如說按下F12）和這個display:none屬性有關係。

問題原因找到了，就好解決了，元素的隱藏顯示不用display，使用css控制。問題解決。

{ 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); 
/* 不佔據空間，無法點選 */ 
} 
 

最後補充點自己的感慨：網友的一些答案有時候很有啟發。display:none問題導致WebUploader點選無效，這個其實在一個問答裡面看到過（url找不到了），但是當時沒有多去思考，一看問題和我遇到的不是很貼切就快速瀏覽完關掉了頁面，現在想來，那個網友對這個理解是比較透徹的，而我是走了彎路，回頭來想想才意識到，解決方式已經搜到過。

我走的彎路是排除法，官網演示沒有問題，我自己的頁面有問題，所以我就一點點排除我的頁面。最笨的辦法，先只保留WebUploader上傳，測試發現沒有問題，原因找到，就是我頁面問題。然後逐個的排除我頁面的元素（要在一個什麼提示都沒有的頁面，找出來哪裡有衝突，感覺就頭大。但是，但是，但是，當你真正動手的時候才發現，困難比想象的要小很多。動手實踐才是王道）。