发送拖放文件到输入类型文件元素

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]);