<input type="file"> 的事件 [重复]

Posted 2023-03-14

【中文标题】<input type="file"> 的事件 [重复]

【英文标题】：Events for <input type="file"> [duplicate]

【发布时间】：2019-01-27 09:49:16

【问题描述】：

我需要编写一个接受 CSV 文件的文件输入，对其进行验证，如果文件中有错误，则不会上传。下面是 React 组件的代码：

<CustomInput
 type="file"
 id="fileBrowser"
 name="file"
 label=filename || 'Choose CSV'
 onChange=this.loadFile
 accept="text/csv"
 invalid=!file.isValid
/>

所以我有问题：onChange 事件仅在输入文件更改时处理。想象一下，我输入了无效的 CSV 文件，出现错误，在此文件中找到它，更正并尝试再次加载此文件，但 onChange 事件无法处理，因为输入认为我有相同的文件，因为它的名称。我找到的唯一解决方案是加载另一个文件和旧文件或更改旧文件的名称。

如果有其他解决方案？

【问题讨论】：

使用表单、提交输入和onSubmit 事件？

出现错误时将值设置为null..

当您检测到输入文件无效时，清除您的<input>（原版为input.value = null;）。

【参考方案1】：

当您发现文件无效时，将Input 的值设置为null。

function foo() 
  var fileInput = document.querySelector(`input[name="myFile"]`);
  // your logic tho file that the file was invalid
  // if invalid
  fileInput.value = null;
  console.log("onchange called");
  

<input type="file" name="myFile" onchange="foo()">