HTML输入文件选择事件不触发在选择相同的文件(HTML input file selection

是否有任何机会，以检测每一个文件选择一个HTML取得了用户input类型的file元素？

这被问过很多次，但通常建议onchange如果用户再次选择相同的文件不会触发事件。

Answer 1:

设置的值input到null上各onclick事件。 这将重置input的值，并触发onchange即使选择相同的路径的事件。

input.onclick = function () {
    this.value = null;
};

input.onchange = function () {
    alert(this.value);
};​

这里有一个DEMO 。

注意：如果您的文件有“：\ fakepath \ C”为前缀这是正常的。 这是一个安全功能阻止的JavaScript知道文件的绝对路径。 该浏览器仍然知道它在内部。

Answer 2:

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

this.value=null; 仅适用于Chrome的必要，Firefox会正常工作只是return false;

这里是一个FIDDLE

Answer 3:

在这篇文章中，标题下的“使用表单输入选择”

http://www.html5rocks.com/en/tutorials/file/dndfiles/

<input type="file" id="files" name="files[]" multiple />

<script>
function handleFileSelect(evt) {

    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
     // Code to execute for every file selected
    }
    // Code to execute after that

}

document.getElementById('files').addEventListener('change', 
                                                  handleFileSelect, 
                                                  false);
</script>

它增加了一个事件监听器“改变”，但我测试，它会触发即使选择相同的文件，而不是如果取消。

Answer 4:

做你想做你的文件处理完成后successfully.just文件控件的值设置为空string.so的.change（文件加载后做的）总是会被调用，即使更改文件名或没有。 像例如，你可以做这个事情，工作对我来说就像魅力

   $('#myFile').change(function () {
       LoadFile("myFile");//function to do processing of file.
       $('#myFile').val('');// set the value to empty of myfile control.
    });

Answer 5:

使用onclick事件明确目标输入的值，每次用户点击场。 这确保了onChange事件会为同一个文件来触发为好。 为我工作:)

onInputClick = (event) => {
    event.target.value = ''
}

<input type="file" onChange={onFileChanged} onClick={onInputClick} />

使用打字稿

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}

文章来源: HTML input file selection event not firing upon selecting the same file