問題:最近發現一個奇怪的bug,
那就是在上傳圖片需要采用input type=file來進行文件選擇.由於為了適應美工的UI圖,所以是把選擇文件的input框隱藏了.然后通過另外一個按鈕的點擊事件來觸發input的選擇事件.代碼如下:
<div style="width:120px;height:120px">
<img src="/image/uploadfile.png" style="width:100%;height:100%" id="uploadImg">
</div>
<input type="file" style="display:none" id="chooseFile">
//js部分,點擊占位圖進行文件選擇
$('#uploadImg').on('click',function(){
$('#chooseFile').trigger('click');
$('#chooseFile').on('change',function(){
//這里要實現圖片預覽,一種方法是先發送給后台,再由后台將圖片的url返回.另一種方法是使用插件.具體代碼就不展示了
//假設我們使用向后台發送的方法,這里假定responseImgUrl是后台返回的圖片url
$('#uploadImg').attr('src',responseImgUrl)//實現預覽
})
})
如上代碼所述,在chrome瀏覽器第一次進行圖片選擇是毫無問題的,可以成功預覽,但是第二次選擇文件的時候,change事件就仿佛失效了,需要多點擊幾次才能成功選擇圖片,一旦我有多張圖需要上傳的話,會出現點擊很多次才能選擇到一次
圖片文件的問題,
也就是說,需要點擊多次uploadImg這個元素才能觸發一次chooseFile這個元素的change事件.真是太蛋疼了.網上看到有的網友說可能是由於瀏覽器對display=none的文件選擇框進行特殊處理.
於是我又把chooseFile的display=none給注釋掉了,結果沒有什么變化.在多次嘗試之后,成功找到解決方法,
那就是不用trigger方法去觸發chooseFile的文件的點擊事件,直接點擊chooseFile進行文件選擇即可.
當然,不同瀏覽器對input type=file這類選擇框的解析不同,造成外觀的差異,為了避免,我們可以做統一處理:
解決方法:
<div style="width:120px;height:120px;position:relative">
<img src="/image/uploadfile.png" style="width:100%;height:100%" id="uploadImg">
<input type="file" style="display:none;position:absolute;width:100%;height:100%;top:0;left:0;z-index:1000;opacity:0" id="chooseFile">
</div>
改成上述代碼后,每次點擊占位圖,實際上點擊的是chooseFile這個元素,從而直接進行文件選擇.頁無需用任何trigger事件.