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 */
}

当我 select 一个文件时，它的名称显示在输入旁边，并且它也被添加到输入的 FileList 中，那么 event.preventDefault() 到底在阻止什么？ :/

瞄准（最终至少）

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

Answer 1

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

编辑：

FileList对象不能修改，那么如何修改一个文件集合呢？

嗯，答案很简单。

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

var selectedFiles= [];

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

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

将变量附加到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);

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

event.preventDefault() on file input doesn't seem to work

html

input

preventdefault