文件输入上的 event.preventDefault() 似乎不起作用

Question

HTML

<input id="file-upload" name="files" type="file" multiple="">

JavaScript

if (inputType === "file") {
  console.log(event);
  event.preventDefault();
  console.log(event.target.files);

  /* do other stuff */
}

当我选择一个文件时，它的名称显示在输入旁边，并且它也被添加到输入的FileList 中，那么event.preventDefault() 究竟是在防止什么？ ：/

目标（最终至少）

允许用户选择文件，但停止默认行为，抓取文件并将它们手动附加到FormData，并且（这很不错）通过创建一些列出选择上传的文件动态 HTML。

Answer 1

输入的更改事件实际上没有默认操作，因此对事件调用 preventDefault() 将无效。

编辑：

FileList对象不能修改，如何修改文件集合？

嗯，答案很简单。

1. 声明并初始化自定义FileList数组

   var selectedFiles= [];

2. 在 onChange 事件中，将所选文件附加到该变量：

   array.forEach(e.target.files, (file) => {
           selectedFiles.push(file);
      });
   

3. 将变量附加到FormData 并提交

   let formData = new FormData(document.querySelector('#request-for-change-form'));
   
   // Creates a new request
   var request = new XMLHttpRequest();
   request.open("POST", "{your action here}");
   
   // Append the files to the formdata
   for (var i = 0; i < selectedFiles.length; i++) {
     formData.append("files[]", selectedFiles[i]);
   }
   
   // Submit the form
   request.send(formData);