Javascript 选择同一文件时未触发HTML输入文件选择事件

是否有机会检测用户为类型为

文件

元素的HTML

输入所做的每个文件选择

这个问题以前被问过很多次，但是如果用户再次选择相同的文件，通常建议的
onchange
事件不会触发
 在本文中，标题为“使用表单输入进行选择”



功能手柄文件选择（evt）{
var files=evt.target.files；//文件列表对象
//文件是文件对象的文件列表。请列出一些属性。
var输出=[]；
for（var i=0，f；f=files[i]；i++）{
//为每个选定文件执行的代码
}
//之后要执行的代码
}
document.getElementById（'files'）.addEventListener（'change'，
handleFileSelect，
假）；

它向“change”添加了一个事件侦听器，但我对它进行了测试，即使您选择了相同的文件，它也会触发，如果您取消，则不会触发。
在每个
onclick
事件上将
输入的值设置为
null
。这将重置
输入
的值，并触发
onchange
事件，即使选择了相同的路径


var input=document.getElementsByTagName（'input'）[0]；
input.onclick=函数（）{
this.value=null；
};
input.onchange=函数（）{
console.log（this.value）；
};




this.value=null
仅适用于Chrome，Firefox只需返回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.target.value=“”
}

使用打字脚本

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}

onInputClick=（事件：React.MouseEvent）=>{
const element=event.target作为HTMLInputElement
element.value=“”
}
清除输入的第0个索引的值对我有效。请尝试下面的代码，希望这将工作（AngularJs）

如果您正在使用Angular，则双向绑定的使用对我很有效

这是我的HMTL

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

如果用户点击Cancel，那么您的代码也必须激活吗？人们期望点击Cancel不会起任何作用，我认为大多数用户会进一步期望重新选择相同的文件会产生与Cancel相同的效果。我不知道这是否可能，但我建议你重新考虑这个设计。取消时，它不应该开火，或者让它可以被检测到。更重要的是删除UI ceveat：如果在选择文件后调用某个操作，用户通常希望在再次选择文件时重复该操作。如果在对文件执行操作后将
input
s值设置为“”，则可能会出现这种行为。但这也会删除可见的文件名。但是，这可能没问题，因为文件实际上已被处理，并且该操作的结果可能会出现在其他地方。请解释您想做什么？我只想模拟桌面应用程序的老式行为。如果我在桌面应用程序中再次“打开”同一文件，通常会重新加载该文件，或者如果对该文件执行了某些操作（例如将其转换为其他格式），则会再次执行此操作。这也是桌面用户对web应用程序的期望，但是
文件
输入
onchange
事件与此不同。考虑到本例中“更改”的含义可能不明确，您是否在多个浏览器中尝试过此操作？您可能需要指定您在哪些浏览器上进行了测试，因为在web上，浏览器并不总是对这些事情达成一致意见。您使用什么环境进行测试？我对Chrome的体验就是我在问题中提到的，
change
事件只会在文件名更改时触发。我尝试了演示，但是（使用Chrome 21）我一直得到'C:\fakepath`+然后是我选择的文件名（不包括路径）。该警报会显示在对同一文件的每次选择上。@JasperdeVries这是一种防止JavaScript知道文件绝对路径的安全功能。浏览器在内部仍然知道路径。顺便说一句，null是唯一允许的路径值。因此，如果您试图将其设置为“未定义”并获得异常，这就是原因。除非您做一个小的更改，否则它在IE11中无法正常工作：。最好将
this.value=null
放在
onchange
的末尾，因为可以在不点击输入元素的情况下激活它（通过使用键盘）。如果以后需要引用，您可以存储
input.files
。简单有效，刚刚在最新的IE和chrome上测试过，效果非常好。谢谢分享他们的课程！只使用代码的答案可能会解决问题，但如果您解释它们是如何解决问题的，它们会更有用。社区需要理论和代码来充分理解你的答案。虽然这段代码可以解决这个问题，但如何以及为什么解决这个问题将真正有助于提高你的帖子质量，并可能导致更多的投票。请记住，你是在将来回答读者的问题，而不仅仅是现在提问的人。请在回答中添加解释，并说明适用的限制和假设。是的，这起作用了。但正如@double-beep所说的，你应该解释答案。感谢btwI，我想有很多框架（比如angular）可以让它工作
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 = ''
}

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

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

  @ViewChild('upload') uploadBtn: HTMLElement;

  fileEvent(e: any){
    
   //file upload part... 

    this.inputValue = "";
  }