javascript - 只能将 ""指定为输入类型文件的值

标签 javascript html file input

我有以下代码来检查我的文件是否为 .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>

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

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

有没有办法解决这个问题,使显示的路径始终是最后一个有效文件的路径?

最佳答案

有点破解,但可能会给你你需要的东西

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>

关于javascript - 只能将 ""指定为输入类型文件的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60686481/

相关文章:

javascript - 如何获取特定格式的日期

javascript - Flask JWT扩展设置cookie错误

php - 更新 map 标记而不刷新页面 - 传单

c# - 递归地从目录中删除文件但保持目录结构不变

java - 向微调器添加数据

从一个文件复制到另一个文件

javascript - 无法包含 JavaScript

javascript - 如何使用 Promise 创建初始化函数?

javascript - 我在 HTML5 中录制音频的代码有什么问题?

CSS 级联优先级