是否可以用 Blob 替换文件输入？答案

【问题标题】：Is it possible to replace a file input with a Blob?是否可以用 Blob 替换文件输入？
【发布时间】：2014-03-20 12:22:27
【问题描述】：

我正在使用一个无法访问其源代码的在线应用程序，但我可以通过 iframe 在其上注入 javascript，因为我可以在同一个域中创建页面。

这个应用程序有一个提交文件上传和文件输入的表单，想想：

<form>
   <!-- lots and lots of inputs -->
   <input type="file" name="blah">
</form>

我想使用此表单为该特定文件而不是磁盘文件提交 javascript Blob，同时不干扰表单的其余部分。我该怎么做？

【问题讨论】：

您可以使用 XHR2(ajax) 来执行此操作，特别是使用 FormData。
使用带有 base64 文件数据的隐藏输入，需要在服务器上进行自定义处理。
这听起来像是我希望的那种解决方案，但我无法访问服务器端代码。我被一个糟糕的内容管理系统困住了。

标签： javascript forms file dojo

【解决方案1】：

可以用blob替换文件输入值。

为此，您必须像这样从中构造 File 对象：

let file = new File([blob], "filename.ext",{type:"mime/type", lastModified:new Date().getTime()});

然后创建 DataTransfer 对象并将此文件添加到其中。

 let container = new DataTransfer();
 container.items.add(file);

这将填充 DataTransfer 的文件列表，可以将其分配给文件输入的文件属性。

fileInputElement.files = container.files;

在fiddle 中可以看到，它是正确分配的。另外，我测试了上传（使用 enctype="multipart/form-data" 的表单输入）并且文件正确传递到服务器。

【讨论】：

【解决方案2】：

可以通过 XMLHttpRequest 和 FormData 的新属性实现

感谢@musa 的评论 ;-)

考虑这个（未经测试的）示例：

function sendFile() {
  var content = "<hello>world</hello>"; // set here the content of your file
  var blob = new Blob([content], { type: "text/xml"}); // set the type of content (eg: image/jpeg)

  var formData = new FormData();
  formData.append('blah', blob);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) {
    alert ('successfully (or not) sent');
  };

  xhr.send(formData);
}

更多信息：

通知：FormData is not supported by IE9 (and less)

Blob 也一样

【讨论】：

我尝试使用 FormData 并模拟我正在修改的页面上的大型不可读 Dojo 代码块发送到服务器的 POST 数据，但无济于事。我希望简单地修改页面上的 html 元素，让 Dojo 代码接管并完成它的工作。如果这是一个个人项目，如果我把所有东西都组织好并在我的控制之下，这将是一个很好的解决方案。