html - 文件输入上的 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 列出选择上传的文件。

标签： htmlinputpreventdefault

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);