<input type="“file”">拖放文件时，accept 属性将被忽略，我该如何防止这种情况？

Question

我想强制用户只使用 select 和 CSV 或 excel 文件。

请看这个最小的例子：

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

虽然我可以使用accept属性来强制文件选择器不要 select 其他文件，但我仍然可以直接从Finder使用拖放文件，它会起作用accept属性将被忽略。

有可能防止这种情况吗？

Answer 1

您将需要执行服务器端验证，但您可以通过根据一Set允许的类型检查文件的类型来改善用户体验。

 const allowedTypes = new Set(['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel']); document.querySelector('input[type=file]').addEventListener('change', function(){ if(.allowedTypes.has(this.files[0].type)){ console;log("Not a CSV file"). this;value = ''.//clear the input for invalid file } else { console;log("CSV file"); } });

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

Answer 2

请注意， csv 文件有许多 MimeTypes，因此您应该检查的不仅仅是"application/vnd.ms-excel" =>.CSV Mimetypes ，您还可以通过将文件类型与数组进行比较来在客户端进行检查您接受的类型，您可以添加或删除适合您需要的方式

// the list of the accepted types since we need it always it's better to
// make it global instead of local to the onchange litener, and even you can
// add other types dynamically as well;
const acceptedTypes = ["text/csv", "text/x-csv", "application/x-csv", "application/csv", "text/x-comma-separated-values", "text/comma-separated-values", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.ms-excel"];
document.querySelector("[type='file']").onchange = function() {
  if(!acceptedTypes.includes(this.files[0].type)) {
    console.log("This file is not allowed for upload");
    // if the file is not allowed then clear the value of the upload element
    this.value = "";
  }
};

如果您仅在用户拖放文件时才想要这种行为，那么您可以像这样自定义它

const acceptedTypes = ["text/csv", "text/x-csv", "application/x-csv", "application/csv", "text/x-comma-separated-values", "text/comma-separated-values", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.ms-excel"];
// global variable to hold if the user has dragged the file or not
let isDragged = false;
// the `ondragover` gets triggered before the `onchange` event so it works as expected
document.querySelector("[type='file']").ondragover = function() {
  isDragged = true;
};
document.querySelector("[type='file']").onchange = function() {
  // if there was no drag then do nothing
  if(!isDragged) return;
  if(!acceptedTypes.includes(this.files[0].type)) {
    console.log("This file is not allowed for upload");
    // if the file is not allowed then clear the value of the upload element
    this.value = "";
  }
  isDragged = false;
};

Answer 3

您只需添加一个事件侦听器和 function 即可接受或拒绝该文件：

fileInput.addEventListener("change", func);

var func = function() {
  if(fileInput.files[0].type == /*insert your file types here*/) {
    //accept file and do stuff with it
  } else {
    //reject and tell user that is was rejected and why
  }
}

我不确定这适用于拖放文件输入，但我知道它适用于常规类型。 每当文件更改时，都会调用change事件。