發送拖放文件到輸入類型文件元素

Question

我有一個表單生成器，我想添加拖放文件功能。

我被卡住的地方在於所有我遇到的資源在丟失時通過xhr上傳圖片。我希望圖像一直存在，直到表單被提交。

理想情況下，event.dataTransfer.files[0]對象將被轉移到<input type="file" ...value="[dropped-file]">元素。

目前我無法做到這一點。他們使用兼容的數據類型嗎？

Answer 1

您可以在發生拖放事件後創建併發送表單，然後用戶單擊conf按鈕。下面是它的要點：（未測試）。

function uploadFile(file) { 
    var form = new FormData(), 
     xhr = new XMLHttpRequest(); 

    form.append('media', file); 
    xhr.open('POST', '/myurl/'); 

    xhr.onprogress = function(e) { 
     showProgress(); 
    } 

    xhr.onload = function(e) { 
     showSuccessConf(); 
    } 

    xhr.send(form); 
} 

uploadFile(event.dataTransfer.files[0]);