是否可以使用HTML拖放文件上传,但没有AJAX / XHR?

时间:2014-08-11 15:43:09

标签: javascript html html5 drag-and-drop

我的表单接受了拖放事件,但我在网上看到的有关它们的所有内容似乎暗示您无法将删除的文件作为标准表单提交的一部分上传,例如<input type="file" />。实际上是否可以避免AJAX / XHR并在提交表单时上传文件?也许将文件数据移动到文件输入中?

谢谢,
丹尼尔。

1 个答案:

答案 0 :(得分:2)

这可以使用jQuery完成。以下是示例代码:

$(document).on("dragover drop", function(e) {
e.preventDefault();  // allow dropping and don't navigate to file on drop
}).on("drop", function(e) {
$("input[type='file']")
    .prop("files", e.originalEvent.dataTransfer.files)  // put files into element
    .closest("form")
      .submit();  // autosubmit as well
});

这允许您将文件拖到“选择文件”按钮上。访问此JsFiddle,以便在工作中看到它:http://jsfiddle.net/qMmPr/

如果这有帮助,请将此标记为正确答案。