Javascript 如何通过拖放发布文件（来自文件API）

我有一个文件上传页面，通过拖放选择文件。因为该文件被放入（而不是使用传统的字段），所以我通过javascript文件API向我公开了该文件

我一直在阅读，但我对异步上传并不感兴趣（因为我还有一些其他数据需要随文件一起提交，但我找到的所有资源都是通过XHR完成的）

以下是我设法拼凑起来的：

function handleFileSelect(evt) {
    evt.toElement.className = "";
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, file; file = files[i]; i++) {
        var f = file;

        var reader = new FileReader();
        reader.onload = function(e) {
          var bin = e.target.result;
          // bin is the binaryString
        };
        reader.readAsBinaryString(file);

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "{% url micro-upload %}");
        xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
        xhr.sendAsBinary(bin);

        output.push('<li><strong>Uploaded:</strong><em>', escape(f.name), '</em> (', f.type || 'n/a', ') - ',
                    f.size, ' bytes, last modified: ',
                    f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                    '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

功能手柄文件选择（evt）{
evt.toElement.className=“”；
evt.stopPropagation（）；
evt.preventDefault（）；
var files=evt.dataTransfer.files；//文件列表对象。
//文件是文件对象的文件列表。请列出一些属性。
var输出=[]；
for（var i=0，file；file=files[i]；i++）{
var f=文件；
var reader=new FileReader（）；
reader.onload=函数（e）{
var bin=e.target.result；
//bin是二进制字符串
};
reader.readAsBinaryString（文件）；
var xhr=new XMLHttpRequest（）；
open（“POST”，“{%url微上传%}”）；
xhr.overrideMimeType（'text/plain；charset=x-user-defined-binary'）；
xhr.sendAsBinary（bin）；
output.push（“
上传：”，转义（f.name），“（”，f.type | | |“n/a”，“）-”，
f、 大小，'字节，上次修改：'，
f、 lastModifiedDate？f.lastModifiedDate.toLocaleDateString（）：“不适用”，
“
”）；
}
document.getElementById（'list'）.innerHTML='
'+output.join（''）+'
'；
}

然而，在服务器端，Django不喜欢这样。它抱怨POST数据格式错误

理想情况下，我认为我的解决方案是：

用户将文件拖放到页面上

文件被添加到隐藏文件

文件与表单数据的其余部分一起发布

我知道大多数浏览器都允许您将文件拖到文件上，但我希望有一个更大的具有自定义样式的拖放目标。

xhr.sendAsBinary（）

不是标准配置。您是否考虑过使用

FormData

？来附加文件（和其他属性）对于mime多部分请求…基本上是form.post（）所做的。请参阅我的代码响应以了解如何做。

xhr.sendAsBinary（）

不是标准的。您是否考虑过使用

FormData

？这将允许您将文件（和其他属性）附加到mime多部分请求…基本上是一个form.post（）是的。请参阅我的回复，了解如何执行此操作的代码