javascript之在前台同步拖放文件上传而不使用 AJAX

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

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

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

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

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

请您参考如下方法:

虽然不是真正的“同步”(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 
});