使用HTML 5将二进制Sting发布到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 ()返回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);        
    };

瞧，瞧。