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

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