以编程方式将输入类型 =“文件”值设置为 base64 图像？答案

【问题标题】：Programmatically set input type="file" value to base64 image?以编程方式将输入类型 =“文件”值设置为 base64 图像？
【发布时间】：2017-03-14 04:28:19
【问题描述】：

我知道本地文件不能以编程方式设置为输入字段的文件的安全原因。假设我将此图像作为 base64：

var bus = "data:image/gif;base64,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";

我想以编程方式将其设置为输入类型文件。请不要建议将此作为字符串发送到服务器，因为我无法控制另一端的 API。

我尝试在我的代码中将其转换为 blob 并将其设置为输入字段：

myInputField.value = blob;

但它会引发安全异常：

未捕获的 DOMException：无法在“HTMLInputElement”上设置“value”属性：此输入元素接受文件名，该文件名只能以编程方式设置为空字符串。

可以通过 javascript 实现吗？我绝对不想涉及文件选择器对话框。

谢谢。

【问题讨论】：

Is it possible via javascript? - 好吧，错误状态是which may only be programmatically set to the empty string - 所以，结论是......

标签： javascript forms filereader

【解决方案1】：

不可能。 HTML 文件输入只能指向计算机上实际存在的文件——它不能指向任意数据块。

【讨论】：

这不完全正确，IIRC，在 Windows 上，您有/有能力在文件上传弹出窗口的字段中输入 URL，如果您也可以传递 dataURI，我现在无法测试，但是无论如何。
所以我通过VM测试了它，它只接受URL，不接受dataURI，但它仍然不一定在用户的机器上。
劫持接受的答案，因为这是谷歌首先引导我的地方，现在有可能：stackoverflow.com/questions/47119426/…

【解决方案2】：

~~不，你不能设置文件输入的值~~*，除了清除它，但听起来这不是你需要的。
相反，将此 dataURI 转换为 Blob，然后将此 Blob 附加到 FormData，最后发布此 FormData。

您的图片将根据您的需要以多部分形式发送。

function dataURItoBlob(data) {
  var binStr = atob(data).split(',')[1],
   len = binStr.length,
   arr = new Uint8Array(len);

  for (var i = 0; i < len; i++) {
    arr[i] = binStr.charCodeAt(i);
  }
  return new Blob(arr);
}

var dataURI = 'data:image/....';
var blob = dataURItoBlob(dataURI);

// you can even pass a <form> in this constructor to add other fields
var formData = new FormData(); 
formData.append('yourFileField', blob, 'fileName.ext');

var xhr = new XMLHttpRequest();
xhr.open('post', yourServer);
xhr.send(formData);

// now you can retrieve your image as a File/multipart with the 'yourFileField' post name

*实际上现在是you can do it，但它仍然相当hackish。

【讨论】：

我正在开发一个 API。我只需要更改输入类型文件的值，侦听器就会启动。此外，文件的通信是通过一个安全的 websocket 进行的，它的变量引用对我来说是不可用的。所以这无济于事。
@MehulMohan 你不能。修改你的 API，让它接受你直接传递一个 Blob，而不是读取文件输入的 files 属性，或者最终，你可能会传递一个像 {files:[blob]} 这样的对象而不是文件输入，因为我猜你的 API 只是为它读书。（它可能还需要一些 name 属性，所以在这种情况下，只需将其添加到生成的 Blob 对象中，或者创建一个 new File(blob, name)，但对于 websocket，您可以只使用 socket.send(blob)。

【解决方案3】：

您可以尝试如下所示。将您的 sting 转换为 Blob 并使用创建的 Blob 创建文件类型。

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

var outputfile=new File([blob], "filename")

【讨论】：

这不会改变您无法设置文件输入值的事实。此外，File 对象只是具有name 和lastModified 属性的Blob。对文件所做的所有事情都可以通过 Blob 完成。