Javascript 不更改未接受文件上的输入文件文本

我有一个代码，实现了如果用户选择的文件不是jpg、jpeg或png，它会显示一条错误消息

async function read(input) {
  var file = input.files[0];
  var idxDot = file.name.lastIndexOf(".") + 1;
  var extFile = file.name.substr(idxDot, file.name.length).toLowerCase();
  if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
      fileContent = await readFile(file);
  }else{
      alert("Only jpg, jpeg or png allowed");
  }

}

这被称为：

<input type="file" align="center" accept=".jpg,.jpeg,.png" onchange="read(this)"/>

问题是，无论文件是什么，它都会将文件输入的文本更改为所选文件，无论它是否为可接受的类型。尽管fileContent继续为空或具有最后一个选定接受文件的最后一个值，但显示的文件是另一个文件

---

如何避免这种行为，以便在选定的文件是已接受的文件时，不会更改所选文件的文本？

只需将输入值设置为null，即可防止输入文件文本更改，如：

演示：

异步函数读取输入{ var file=input.files[0]； var idxDot=file.name.lastIndexOf.+1； var extFile=file.name.substridxDot，file.name.length.toLowerCase； 如果extFile==jpg | | extFile==jpeg | | extFile==png{ //fileContent=等待readFilefile； 警报已选择有效文件！； }否则{ alertOnly允许使用jpg、jpeg或png格式； input.value=null； } }

---

请选择一个非图像文件（如pdf）进行测试。

谢谢，但这只是部分回答了我的问题，如果您首先选择了一个可接受的文件类型，然后选择了无效的文件类型，它会将输入保留为空，而不是保留以前的有效文件。我检查设置文件的上一个值，但这会给出一个错误。

async function read(input) {
  var file = input.files[0];
  var idxDot = file.name.lastIndexOf(".") + 1;
  var extFile = file.name.substr(idxDot, file.name.length).toLowerCase();
  if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
      fileContent = await readFile(file);
  }else{
      alert("Only jpg, jpeg or png allowed");
      input.value = null;
  }
}