是否有机会检测用户为元素input
类型的 HTML 所做的每个文件选择file
?
之前多次询问过这个问题,但是onchange
如果用户再次选择相同的文件,通常建议的事件不会触发。
是否有机会检测用户为元素input
类型的 HTML 所做的每个文件选择file
?
之前多次询问过这个问题,但是onchange
如果用户再次选择相同的文件,通常建议的事件不会触发。
的值设置input
到null
每个onclick
事件。即使选择了相同的路径,这也会重置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">
注意:如果您的文件以“C:\fakepath”为前缀是正常的。这是一项安全功能,可防止 JavaScript 知道文件的绝对路径。浏览器内部仍然知道它。
每次用户点击字段时,使用 onClick 事件清除目标输入的值。这确保了 onChange 事件也会为同一个文件触发。为我工作:)
onInputClick = (event) => {
event.target.value = ''
}
<input type="file" onChange={onFileChanged} onClick={onInputClick} />
使用typescript
onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
const element = event.target as HTMLInputElement
element.value = ''
}
<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;
这是一把小提琴
在这篇文章中,在标题“使用表单输入进行选择”下
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>
它为“更改”添加了一个事件侦听器,但我对其进行了测试,即使您选择相同的文件,它也会触发,而不是在您取消时触发。
handleChange({target}) {
const files = target.files
target.value = ''
}