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

IT技术 javascript html forms dom-events
2021-01-13 21:58:18

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

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

6个回答

的值设置inputnull每个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 知道文件的绝对路径。浏览器内部仍然知道它。

@JasperdeVries 这是一项安全功能,可防止 JavaScript 知道文件的绝对路径。浏览器仍然知道内部路径。
2021-03-14 21:58:18
最好放在this.value = nullthe 的末尾,onchange因为无需单击即可激活输入元素(通过使用键盘)。input.files如果以后需要参考,可以存储
2021-03-14 21:58:18
它在 IE11 中不能很好地工作,除非你做一个小的改变:demo
2021-03-21 21:58:18
我尝试了该演示,但是(使用 Chrome 21)我不断收到 `C:\fakepath` + 然后是我选择的文件名(不包括路径)。但是,每次选择同一文件时都会显示警报。
2021-03-24 21:58:18
顺便说一句,null 是 <input type="file"> 唯一允许的值。因此,如果您尝试将其设置为 undefined 并收到异常,这就是原因。
2021-03-27 21:58:18

每次用户点击字段时,使用 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;

这是一把小提琴

简单有效,刚刚在最新的 IE 和 chrome 中进行了测试,效果很好。谢谢分享
2021-04-08 21:58:18

在这篇文章中,在标题“使用表单输入进行选择”下

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>

它为“更改”添加了一个事件侦听器,但我对其进行了测试,即使您选择相同的文件,它也会触发,而不是在您取消时触发。

考虑到在这种情况下“更改”的潜在含义不明确,您是否在多个浏览器中尝试过?您可能想要指定您在网络上尝试过的那些,浏览器在这些事情上并不总是完全一致。
2021-03-22 21:58:18
你的测试使用什么环境?我对 Chrome 的体验是我在问题中所说的,该change事件只会在文件名更改时触发。
2021-03-24 21:58:18
handleChange({target}) {
    const files = target.files
    target.value = ''
}
虽然此代码可能会解决问题,但包括解释如何以及为何解决问题将真正有助于提高您的帖子质量,并可能导致更多的投票。请记住,您是在为将来的读者回答问题,而不仅仅是现在问的人。编辑您的答案以添加解释并说明适用的限制和假设。来自评论
2021-03-13 21:58:18
是的,这奏效了。但正如@double-beep 所说,你应该解释答案。顺便说一句,谢谢
2021-04-03 21:58:18
嘿,课程!仅代码答案可能会解决问题,但如果您解释它们如何解决问题,它们会更有用。社区需要理论和代码才能完全理解您的答案。
2021-04-11 21:58:18