change事件異常處理辦法

問題:最近發現一個奇怪的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事件.