如何通过 Javascript 上传图片？

Question

我正在尝试将图像上传到另一个页面的 input[type='file']。

这是我目前所拥有的：

 const dT = new ClipboardEvent('').clipboardData || new DataTransfer();
 dT.items.add(new File(result.products[pointer][3], 'product_image.png'));
 document.querySelector('input[class="mkhogb32"]').files = dT.files;
 console.log(dT);
 console.log(document.querySelector('input[class="mkhogb32"]').files);

代码通过并创建一个文件并将其添加到输入文件中，但是，图像实际上从未上传到页面：

Terminal of page

上图显示了我的函数运行后的输入文件，显示了函数通过。然而，在这个特定的页面上，当以传统方式上传图像时，从桌面上选择文件或拖放它会更改 css，因为它会显示图像。

如何让我注入的文件触发相同的反应？

result.products[pointer][3] 指的是从上一页scraped的图像src，如何使注入的文件包含该图像？

Answer 1

在此示例中，我选择了本地图像。 FileReader object 会将文件作为数据 URL 读取，并在准备好（“加载”）时将数据 URL 插入到 src 属性中（如果是图像）。

var reader1 = new FileReader();

reader1.addEventListener('load', e => {
  document.querySelector('#img').src = e.target.result;
});

document.addEventListener('DOMContentLoaded', e => {
  document.forms.pickfile.file.addEventListener('change', e => {
    reader1.readAsDataURL(e.target.files[0]);
  });
});

<form name="pickfile">
  <input name="file" type="file" />
</form>
<img id="img" />

Answer 2

我认为不可能使用 JavaScript 将文件添加到 input[type="file"] 元素，但您可以从表单中获取 formdata，然后将自己的数据添加到 formdata。

在示例中：当用户单击提交时，我从表单中“复制”了表单数据（好的，此示例中没有数据，但仍然......）。我创建了一个文件对象（也许您已经有一个文件对象或文件对象列表）并将其设置为 formData 中的一个对象。最后，我发布 formData，就好像它是来自表单的普通 POST 提交一样。

也许这会有所帮助...

document.forms.pickfile.addEventListener('submit', e => {
  e.preventDefault();

  let svg = ['<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect fill="blue" width="200" height="200" x="0" y="0"/></svg>'];
  let file = new File(svg, 'example.svg', {type: 'image/svg'});

  let formData = new FormData(e.target);
  formData.set('file', file, 'example.svg');

  fetch('/', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data));
});

<form name="pickfile">
  <input name="file" type="file" />
  <button>Send</button>
</form>