没有AJAX的拖放文件上传,在前台同步？

Question

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

我想逐步增强表单,以便您可以从浏览器外部的任何位置删除文件(不仅仅是在文件输入字段中,内置到某些浏览器中)来上传它.

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

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

我想要一个不需要任何后端更改的渐进增强功能.它应该使用页面中的表单同步发生.JS很好,只要上传发生在"前台".当然,同步AJAX不起作用.

Answer 1

虽然不是真正的"同步"(JavaScript执行实际上不会停止),但您可以通过<input type="file">编程方式设置选择的文件.事实上,这些元素和拖动共享他们的文件后端实现(File和FileList实例),所以它真的很直接.更重要的是,由于两个前端都使用FileLists,拖动多个文件就像无缝地一样工作.

这适用于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
});