时间戳

首页 > 解决方案 > 不要在不接受的文件上更改输入文件文本

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 继续为空或具有最后选择的已接受文件的最后一个值，但显示的文件是另一个文件。

如何避免这种行为，因此如果选择了一个接受的文件，则所选文件的文本不会更改？

标签： javascripthtmlfile

解决方案

您可以通过将输入值设置为以下方式来防止输入文件文本发生更改null：

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;
  }
}

演示：

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);
      alert("Valid file selected!");
  }else{
      alert("Only jpg, jpeg or png allowed");
      input.value = null;
  }
}
<input type="file" align="center" accept=".jpg,.jpeg,.png" onchange="read(this)"/>
<br/>
<p>Please select a non-image file like a pdf for testing.</p>

推荐阅读