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

Send drag and drop file to input type file element

本文关键字：文件 输入 类型 元素 拖放      更新时间：2023-09-26

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

我遇到的问题是，我遇到的所有资源都会在放下时通过xhr上传图像。我希望该图像在提交表单之前保持不变。

理想情况下，event.dataTransfer.files[0]对象将被转移到<input type="file" ...value="[dropped-file]">元素。

目前我无法做到这一点。他们使用兼容的数据类型吗？

您只需在drop事件发生后创建并发送一个表单，然后用户单击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]);
相关文章：