选择同一文件时不会触发HTML输入文件选择事件

Question

有没有机会检测用户为input类型file元素的HTML所做的每个文件选择？

之前曾多次询问此问题,但onchange如果用户再次选择同一文件,则通常建议的事件不会触发.

Answer 1

在每个事件上设置inputto 的值.即使选择了相同的路径,这也会重置该值并触发事件.nullonclickinputonchange

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

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

这是一个演示.

注意:如果您的文件以"C:\ fakepath \"为前缀,这是正常的.这是一个安全功能,阻止JavaScript知道文件的绝对路径.浏览器内部仍然知道它.

Answer 2

每次用户点击字段时，使用 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 = ''
}

Answer 3

<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 4

在本文中,标题为"使用表单输入进行选择"

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 5

handleChange({target}) {
    const files = target.files
    target.value = ''
}