如何将html中文件的上传类型设置为仅excel？

Question

Image here shows how one can manipulate the browser to choose a different file我已经就类似问题经历了大量的问题和答案，但到目前为止没有找到任何帮助。目前的方法有很多，其中比较突出的是：

<input type="file" id="fileSelect"
       accept=".csv,
               application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
               application/vnd.ms-excel">

但是，这并不能解决我的问题。用户仍然可以在浏览器中将文件类型更改为 All Files 并选择不同的文件。我想知道是否有任何方法可以限制用户只选择 excel 文件。

Answer 1

您可以使用change 事件来检查所选文件.type 是否与accept 属性类型之一匹配

var input = document.getElementById("fileSelect");
input.addEventListener("change", function(e) {
  if (!new RegExp(this.accept.replace(/,/g, "|")).test(this.files[0].type)) {
     this.value = "";
     this.labels[0].innerHTML = "Invalid file type selected. "
                                + "Please select one of <code>" 
                                + this.accept 
                                + "</code> file types";
  } else {
    console.log("valid file type", this.files[0].type);
    this.labels[0].innerHTML = "";
    // do stuff
  }
})

[for="fileSelect"] {
  color:red;
}

<input type="file" id="fileSelect" accept=".csv,
               application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
               application/vnd.ms-excel"><br>
<label for="fileSelect"></label>