1. 程式人生 > >記input file元素change事件上傳一次失效問題

記input file元素change事件上傳一次失效問題

使用input file元素時上傳碰到兩個問題:

  1. change事件上傳一次後失效

  2. 相同檔案只能選擇一次(有上傳相同檔案的需求)

問題1:網上一搜很多碰到同樣問題的小夥伴,解決方案大致思路為上傳完成後替換原file元素的內容,然後重新繫結change事件,大致實現如下

//上傳成功後大致操作
$("#file").replaceWith("<input type='file' name='file' id='file'/>");
$('#fileParent').on('change', function () {});

這樣做是能夠解決問題,但是這樣做除了麻煩以外,個人感覺語義上也不太好理解,每上傳一次還要重新生成一次input file元素,重新繫結change事件。後來發現了一個感覺更好的解決方案,可以從file元素的父類監聽其change事件(此寫法不相容IE8,重新替換file元素可支援IE8

),具體參考file的onChange事件的新增,文末也有我的實現程式碼。

問題2:這個問題很好理解,按照語義change事件自然是在file元素中的內容發生改變時觸發,選擇同一檔案沒有改變其內容導致無法觸發change事件,所以解決方案就是在上傳成功後把file元素的內容置空即可。

具體實現過程:

<!--file元素html宣告:-->
 <div style="display: none;" id="fileParent">
       <input type="file" name="file" id="file">
 </div>
<!--file元素js操作--> $('#fileParent').on('change','#file', function () { //上傳操作 //上傳成功後清空file元素中的內容,否則選擇同一檔案無法觸發change事件 $("#file").val(""); });