HTML输入文件选择事件在选择相同文件时不触发

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

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

203418 次浏览
小开

在本文中，在“使用表单输入进行选择”的标题下

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>

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

小开
最佳答案

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

var input = document.getElementsByTagName('input')[0];


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

input.onchange = function () {
console.log(this.value);
};
<input type="file" value="C:\fakepath">

Note: It's normal if your file is prefixed with 'C:\fakepath'. That's a security feature preventing JavaScript from knowing the file's absolute path. The browser still knows it internally.

小开 
<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;就可以正常工作

这是一个小提琴

小开

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

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

使用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 = ''
}
小开 
handleChange({target}) {
const files = target.files
target.value = ''
}
小开

清除输入的第0个索引的值对我来说很有用。请尝试下面的代码，希望这将工作(AngularJs)。

          scope.onClick = function() {
input[0].value = "";
input.click();
};
小开

如果你使用的是Angular，双向绑定对我来说是有效的。

这是我的HMTL

<input type="file" #upload name="upload" [(ngModel)]="inputValue"(change)='fileEvent($event)'/>

和TS . .

  @ViewChild('upload') uploadBtn: HTMLElement;


fileEvent(e: any){
    

//file upload part...


this.inputValue = "";
}
小开 
<input #myInput type="file" id="imgFile" (click)="$event.target.value=null"
(change)="detectUploadedImage($event)" accept="image/*" />
小开

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

我使用空字符串代替

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


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

提交答案