只能将“”作为值分配给输入类型文件答案

【问题标题】：Can only assign "" as value to input type file只能将“”作为值分配给输入类型文件
【发布时间】：2020-03-14 19:20:24
【问题描述】：

我有以下代码检查我的文件是 .jpg、.jpeg 还是 .png：

<!DOCTYPE html>
<html>
<body>
<input type="file" align="center" accept=".jpg,.jpeg,.png" onchange="this.size = Math.max(this.value.length, 7)+15;read(this)" id="myinput" style="min-width: 50px;" 
      />

</body>
</html>

<script>

var myfile=""
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);
      myfile=file
      alert("Valid file selected!");
  }else{
      alert("Only jpg, jpeg or png allowed");
      input.value = myfile;
  }
}
</script>

我正在尝试，如果选择了与该文件不同的文件，则会显示所采用的有效文件的最后一个值。

但这只会发生在开始时，在一个有效的文件被取走之后。如果我选择另一个路径，则输入中显示的路径会更改为所选文件的路径，即使它不是有效路径。

有没有办法解决这个问题，所以显示的路径始终是最后一个有效文件之一？

【问题讨论】：

您不能在 JavaScript 中设置 file 输入的值，它只能由用户使用文件选择器设置。
@Barmar。但分配“”有效。为什么是那个而不是其他？
因为它只是清除它，所以这是允许的。您不能分配特定文件，这将是一个安全问题。
@Barmar，我明白了，这是有道理的。我想我会检查发布文件的按钮。

标签： javascript html file input

【解决方案1】：

有点小技巧，但可能会给你你需要的东西

var myfile={name:"none"};
 function read(input) {
  var file = input.files[0];
  var idxDot = file.name.lastIndexOf(".") + 1;
  var extFile = file.name.substr(idxDot, file.name.length).toLowerCase();
  var span =document.getElementById('last');
  if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
      //fileContent = await readFile(file);
      myfile=file      
      alert("Valid file selected!");
       span.style.display='none';
  }else{
      alert("Only jpg, jpeg or png allowed");
      input.value = '';     
      span.style.display='inline';
      span.innerHTML = "Last valid File was: " + myfile.name
  }
}

span{
display:none;
}

<!DOCTYPE html>
<html>
<body>
<input type="file" align="center" accept=".jpg,.jpeg,.png" onchange="this.size = Math.max(this.value.length, 7)+15;read(this)" id="myinput" style="min-width: 50px;" 
      />
      <span id='last'></span>

</body>
</html>

【讨论】：