如何通过 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);

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

页面终端

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

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

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

Answer 1

在这个例子中，我选择了一个本地图像。 FileReader object会将文件作为数据 URL 读取，并且当准备好（“加载”）时，它会将数据 URL 插入到 image.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。

在示例中：当用户单击提交时，我从表单中“复制”表单数据（好的，此示例中没有数据，但仍然......）。 我创建了一个文件 object（也许您已经有一个文件 object 或文件对象列表）并将其设置为 formData 中的 object。 最后，我发布 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>