如何在JavaScript中将一个File对象添加到FileList集合中？

Question

我正在开发一个拖放文件上传字段。

我能够返回一个包含用户指定文件的FileList对象。我有一个隐藏的文件输入字段，我想把文件对象添加到它里面，以便可以通过AJAX发送表单数据。

问题在于，我似乎无法将文件对象复制到文件输入字段中。以下是我的尝试方式：

var files = evt.dataTransfer.files; // FileList object.
var fileUploadElem = document.getElementById(fileUploadId);

// trying to copy the first file of files into the file upload field
fileUploadElem.files[0] = files[0];

// this statement returns '0' instead of '1'
console.log('fileUploadElem length: '+fileUploadElem.files.length);

感激任何建议或指引。

- Mr B

---

我认为你不能这样做，使用一个FormData对象并通过ajax发送它。 - adeneo

Answer 1

这是来自MDN的一个示例，介绍如何使用FormData：

function sendForm() {
  var output = document.getElementById("output");
  var data = new FormData(document.getElementById("fileinfo"));

  data.append("CustomField", "This is some extra data");

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "stash.pl", false)
  xhr.send(data);
  if (xhr.status == 200) {
    output.innerHTML += "Uploaded!<br />";
  } else {
    output.innerHTML += "Error " + xhr.status + " occurred uploading your file.<br />";
  }
}

- user1115652

Answer 2

它对我不起作用的原因是因为其中一个JavaScript属性在Chrome中不受支持，因此它适用于使用Firefox浏览器的同事的机器，但对我无效。

- Mr B