在網頁上要操作文件通常會使用INPUT[type=file]控件，但這個控件的設計很蛋疼。它不像其它編程語言中文件選擇后會觸發一個事件，只是讓上面的文字改變，而這個改變可能會觸發change事件而已。對于文字沒改變的選擇，change事件則不會觸發。
　　當INPUT[type=file]控件上已經選擇過一次文件之后，再次點擊它選擇同一個文件時change事件就不會觸發。因為第二次選擇后里面的文字和第一次是一樣的，沒有改變。還有個更蛋疼情況是有些瀏覽器會自動記住控件上的文字，即使頁面關閉后重新打開還是會恢復到原來的文字。這時候選擇同路徑的文件也不會觸發change事件。
　　這些問題都是INPUT[type=file]控件蛋疼的設計所引起的，從一般渠道無法解決這個問題。有人建議在點擊INPUT[type=file]控件時先清空其文字，這樣在選中文件之后自然可以觸發change事件。但一些瀏覽器上對INPUT[type=file]控件的值是只讀的，要清空恐怕不容易。但從這里我們可以推廣出另一種偷天換日的解決方案。既然值無法寫入，為何我們不創建一個新的INPUT[type=file]把舊的替換掉呢？這么一來，需要解決的問題就剩下事件綁定了。這可以通過在容器上綁定事件，之后通過冒泡的方式來獲取，而不把事件綁定到目標元素上的方法來解決。下面就是一個不太漂亮的解決辦法（由于一些兼容代碼寫著麻煩，這里直接用了jQuery）：
運行<script?src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
??form.reset();?//清除瀏覽器記錄的上次記錄
??var?file;
??$(form).on("change","#file",function(e){
????//輸出選中結果
????console.log(this.value);
????//每次選中都保存舊元素，并使用新的控件替換
????$(this).clone().replaceAll(file=this);
??}).submit(function(){
????//提交時把之前保存的舊元素替換回去
????$("#file").replaceWith(file);
??});
});
</script>
<form?id="form">
??<input?type="file"?name="file"?id="file"><br/>
??<input?type="submit"?/>
</form>

轉載于:https://www.cnblogs.com/axl234/p/3897399.html

總結

以上是生活随笔為你收集整理的INPUT[type=file]的change事件不触发问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。