替代 onchange 事件<input type='file' />

Question

看起來很簡單的事情，但無法弄清楚。 我一直在<input type=file />元素上使用onchange事件，它運行良好。 一旦用戶瀏覽並選擇了一個文件，我就會使用我的自定義 js 函數獲取路徑並上傳它。

問題是如果用戶連續兩次選擇同一個文件，這不起作用， onchange不會觸發（這是有道理的，因為沒有任何改變）但在我的情況下，捕獲該事件對我來說也很重要，獲取路徑和上傳。

---

（類似於Clearing <input type='file' /> using jQuery ，不確定我是否應該將其解決為重復）

Answer 1

您可以刪除輸入並使用 javascript 創建一個相同的輸入 - 新輸入將為空。

（編輯答案直截了當，評論現在無關緊要）

Answer 2

您可以讓選擇文件按鈕清除輸入 onclick 的內容，這樣即使他們選擇了相同的文件，您的事件仍然會觸發。 當然，然后您的 onchange 處理程序將不得不檢查空白值，但如果它要使用該值上傳文件，它可能應該做類似或更多的事情......

Answer 3

真的沒有辦法解決這個問題。 如果您添加任何其他偵聽器或計時器，那么您可能會上傳文件，即使用戶不希望它（例如，使用 onclick）。 您確定不能以其他方式上傳相同的文件嗎？ 上傳開始后如何清除輸入（如果無法清除，則將其替換為新輸入）。

Answer 4

在 onchange 回調中將輸入的值設置為 ""。 這樣，如果下次選擇相同的文件，仍然會觸發 onchange 事件，因為該值與 "" 不同。

document.getElementById('files').value = "";

Answer 5

您無法在文件輸入上第二次觸發更改事件，但您可以在跨度上觸發更改事件。 下面適用於 chrome 和 ff。 我沒有檢查IE。 $('#change_span').bind('change',function(){ alert($('#file_1').val()) })

<span id='change_span'><input id="file_1" type="file"></span>

Answer 6

這種行為是否只存在於 IE 中？ 如果是這樣，它可能與這個問題有關：
<select> 上的 jQuery 更改事件未在 IE 中觸發
本質上：您可能需要檢查 onClick 。

Answer 7

如果你不想使用 jQuery

<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

它在 Firefox 中運行良好，但對於 Chrome，您需要添加this.value=null; 警覺后。

Answer 8

function resetFileInput ($element) {
  var clone = $element.clone(false, false);
  $element.replaceWith(clone);
}

然后使用現場：

$('#element_id').live('change', function(){
...
});

對我來說效果很好！

Answer 9

在表單中保留 2 個元素 - 其中一個被隱藏，另一個將觸發上傳事件。

<input hidden id="file_hidden" (onchange)="uploadFile()" type="file">

執行 uploadFile 時，將文件內容放入 file_1 並將 file_hidden 的值重置為 ''。 這樣，您的輸入將始終具有新的價值。