在網(wǎng)頁(yè)上要操作文件通常會(huì)使用INPUT[type=file]控件，但這個(gè)控件的設(shè)計(jì)很蛋疼。它不像其它編程語(yǔ)言中文件選擇后會(huì)觸發(fā)一個(gè)事件，只是讓上面的文字改變，而這個(gè)改變可能會(huì)觸發(fā)change事件而已。對(duì)于文字沒(méi)改變的選擇，change事件則不會(huì)觸發(fā)。
　　當(dāng)INPUT[type=file]控件上已經(jīng)選擇過(guò)一次文件之后，再次點(diǎn)擊它選擇同一個(gè)文件時(shí)change事件就不會(huì)觸發(fā)。因?yàn)榈诙芜x擇后里面的文字和第一次是一樣的，沒(méi)有改變。還有個(gè)更蛋疼情況是有些瀏覽器會(huì)自動(dòng)記住控件上的文字，即使頁(yè)面關(guān)閉后重新打開(kāi)還是會(huì)恢復(fù)到原來(lái)的文字。這時(shí)候選擇同路徑的文件也不會(huì)觸發(fā)change事件。
　　這些問(wèn)題都是INPUT[type=file]控件蛋疼的設(shè)計(jì)所引起的，從一般渠道無(wú)法解決這個(gè)問(wèn)題。有人建議在點(diǎn)擊INPUT[type=file]控件時(shí)先清空其文字，這樣在選中文件之后自然可以觸發(fā)change事件。但一些瀏覽器上對(duì)INPUT[type=file]控件的值是只讀的，要清空恐怕不容易。但從這里我們可以推廣出另一種偷天換日的解決方案。既然值無(wú)法寫入，為何我們不創(chuàng)建一個(gè)新的INPUT[type=file]把舊的替換掉呢？這么一來(lái)，需要解決的問(wèn)題就剩下事件綁定了。這可以通過(guò)在容器上綁定事件，之后通過(guò)冒泡的方式來(lái)獲取，而不把事件綁定到目標(biāo)元素上的方法來(lái)解決。下面就是一個(gè)不太漂亮的解決辦法（由于一些兼容代碼寫著麻煩，這里直接用了jQuery）：
運(yùn)行<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){
????//輸出選中結(jié)果
????console.log(this.value);
????//每次選中都保存舊元素，并使用新的控件替換
????$(this).clone().replaceAll(file=this);
??}).submit(function(){
????//提交時(shí)把之前保存的舊元素替換回去
????$("#file").replaceWith(file);
??});
});
</script>
<form?id="form">
??<input?type="file"?name="file"?id="file"><br/>
??<input?type="submit"?/>
</form>

轉(zhuǎn)載于:https://www.cnblogs.com/axl234/p/3897399.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。