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

Question

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

Answer 1

这可以使用 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/

如果有帮助，请将其标记为正确答案。