添加一个文件（JS对象）到输入类型=“file”

Question

我需要一种将 File 对象添加到文件输入字段的方法。

请注意，我不想设置文件字段的值。 （这是一个安全风险，...我知道）
我已经拥有该文件本身（及其所有内容！）

我正在创建这样的文件对象：

canvas.toBlob(function(blob) {
  var file = new File([blob], 'file.png');
  // and now I want to add MY File to the input here
});

请不要告诉我如何上传文件，我知道 XMLHttpRequest Level 2。我想将文件上传到外部网站（可能使用用户脚本或类似的东西）。

那么，我怎样才能实现这一目标呢？ 或者如果不可能：为什么我不能将我实际拥有的文件（因为我在浏览器中创建它（作为虚拟文件，甚至不存在于用户文件系统中））添加到我拥有的输入字段也？ （从技术上讲，输入字段可以是我自己的，这在这里并不重要）

Answer 1

不，你不能。

取自此处：

您似乎想从 drop 事件中获取 File 对象并将其分配给元素。不幸的是，你不能这样做。只有用户可以选择文件；您无法动态更改将要上传的文件，因为浏览器出于安全原因拒绝 JavaScript 这种能力。

Answer 2

是的，这是可能的：

从 blob 加载文件：

  let fileInputElement = document.getElementById('file_input');
  let container = new DataTransfer();
  // Here load or generate data
    let data = new Blob();
    let file = new File([data], "g"+i+".jpg",{type:"image/jpeg", lastModified:new Date().getTime()});
    container.items.add(file);
  fileInputElement.files = container.files;

从另一个文件输入加载文件：

  let input1 = document.getElementById('file_input');
  let input2 = document.getElementById('some_other_input')
  let container = new DataTransfer();
   [...input2.files].map(file=>container.items.add(file));
  input1.files = container.files;

https://jsfiddle.net/Kartearis/gmhwnaz6/3/