使用 HTML 5 向 Django 应用发送二进制串

Question

我通过HTML5的FileReader和jQuery来读取一个文件，代码是这样的：

holder.ondrop = function(e) {
    this.className = '';
    e.preventDefault();

    var file = e.dataTransfer.files[0],
    reader = new FileReader();

    reader.onloadend = function(event) {
        $.ajax({  
        url:"/path/to/upload",
        type: "POST",  
        data: event.target.result, 
        success: function(data, status, xhr) {
         alert("success!");
        },
        error: function(xhr, status, error) {
         alert("fail")
        },
        });
    };

    reader.readAsBinaryString(file);
    return false;
};

这里的"ondrop"是用来处理我叫做"holder"的元素上的拖放操作。

这个文件会提交到我的django应用程序中，如果我只是这样做：

print request.raw_post_data

我在控制台里看到的是二进制输出。

我尝试像这样把它写入一个文件（在我的测试中，它总是一个jpg文件）：

f = open('/tmp/file.jpg', 'wb')
f.write(request.raw_post_data)
f.close()

文件确实写入了，但当我尝试打开它时，似乎是损坏的。

我怀疑这可能和request.raw_post_data的编码不正确有关，但我不太确定该怎么修正……虽然raw_post_data看起来是二进制的，但type()返回的是str。

有什么想法吗？

Answer 1

这篇帖子对我帮助很大，也许对你也会有帮助。

http://hacks.mozilla.org/2010/06/html5-adoption-stories-box-net-and-html5-drag-and-drop/

我最后把我的JavaScript改成了：

holder.ondrop = function(e) {
        e.preventDefault();

        var file = e.dataTransfer.files[0];
        var request = new XMLHttpRequest();

        request.open("POST",  upload_url, true); // open asynchronous post request
        request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        request.send(file);        
    };

然后就成功了。