在每个onclick事件上将输入值设置为空。这将重置输入的值并触发onchange事件，即使选择了相同的路径。

var input = document.getElementsByTagName('input')[0]; 输入。Onclick = function () { 这一点。Value = null; }; 输入。Onchange = function () { console.log (this.value); }; <input type="file" value="C:\fakepath">

注意:如果你的文件前缀是'C:\fakepath'，这是正常的。这是一个安全特性，可以防止JavaScript知道文件的绝对路径。浏览器内部仍然知道它。

在文件成功加载后，可以做任何您想做的事情。完成文件处理后，将文件控制的值设置为空白字符串。因此.change()将始终被调用，即使文件名更改与否。举个例子，你可以做这件事，对我来说很有魅力

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

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

在每个onclick事件上将输入值设置为空。这将重置输入的值并触发onchange事件，即使选择了相同的路径。

var input = document.getElementsByTagName('input')[0]; 输入。Onclick = function () { 这一点。Value = null; }; 输入。Onchange = function () { console.log (this.value); }; <input type="file" value="C:\fakepath">

注意:如果你的文件前缀是'C:\fakepath'，这是正常的。这是一个安全特性，可以防止JavaScript知道文件的绝对路径。浏览器内部仍然知道它。

选择的答案(使用状态设置输入值null)给了我一个错误。

我使用空字符串代替

    const [fileValue, setFileValue] = React.useState("")

    <input
        onClick={() => {
           setFileValue("");
        }}
        type="file"
        value={fileValue}
        onChange={handleAddFile}
    />

使用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 = ''
}