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">

然而，这并不能解决我的问题。用户仍然可以在浏览器中将文件类型更改为所有文件并选择其他文件。我想知道是否存在任何可以限制用户仅选择 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>

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

1 个答案: