1

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

我一直在阅读Mozilla 的这篇文章，但我对异步上传它并不是很感兴趣（因为我有一些其他数据需要与文件一起提交，但我设法找到的所有资源都在使用它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>';
}

但是服务器端，Django 不喜欢这样。它抱怨格式错误的 POST 数据。

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

  1. 用户将文件拖放到页面上
  2. 文件被添加到隐藏文件<input>
  3. 文件与表单数据的其余部分一起发布。

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

4

1 回答 1

1

xhr.sendAsBinary()不是标准的。你有没有想过使用FormData？这将允许您将文件（和其他属性）附加到 mime 多部分请求......基本上是 form.post() 所做的。有关如何执行此操作的代码，请参见我的回复。

于 2012-03-08T19:51:50.800 回答