INPUT[type=file]的change事件不觸發問題

在網頁上要操作文件通常會使用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>