javascript - 不用AJAX，前台同步拖放文件上传？

Question

我有一个常规的网站 <input type="file">文件上传，提交表单时将数据POST到后端。

我想逐步增强表单，以便您可以从浏览器外部将文件拖放到视口(viewport)中的任何位置(不仅仅是在文件输入字段上，如某些浏览器内置的那样)来上传它。

表单是否自动提交并不重要。因此，如果拖放操作仅选择文件字段中的文件，而不开始上传，那就没问题。我不需要对多个文件的支持。我不需要显示上传进度、缩略图或任何花哨的东西。

我知道有JS库支持拖放上传，但它们似乎都是通过AJAX上传的。我可以这样做，但随后我需要修改后端和前端来处理上传错误、重定向并在成功时显示正确的消息等等。

我想要一个不需要任何后端更改的渐进增强。它应该使用页面中的表单同步发生。 JS 没问题，只要上传发生在“前台”。当然，同步 AJAX 是行不通的。

Answer 1

虽然不是真正的“同步”(JavaScript 执行实际上不会停止)，但您可以设置 <input type="file"> 选择的文件以编程方式。事实上，这些元素和拖动共享它们的文件后端实现(File和FileList实例)，所以它非常简单。更重要的是，由于两个前端都使用 FileList s，拖动多个文件同样无缝。

这适用于 Chrome(使用 jQuery): http://jsfiddle.net/qMmPr/ .

$(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
});