如何通過 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>