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

Posted 2023-05-08

【中文标题】如何在 JavaScript 中将 File 对象添加到 FileList 集合中？

【英文标题】：How to add a File object to a FileList collection in JavaScript?

【发布时间】：2014-08-01 19:10:08

【问题描述】：

我正在处理拖放文件上传字段。

我能够返回一个 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);

感谢任何建议或指示。

【问题讨论】：

我不认为你可以这样做，使用 FormData 对象并使用 ajax 代替。

【参考方案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 />";
  

【参考方案2】：

它对我不起作用的原因是因为其中一个 javascript 属性在 Chrome 中不受支持，因此它在我同事的机器上工作，他在 Firefox 浏览器中工作但不适合我。