通过 AJAX Post 将文件输入作为 FileReader 二进制数据发布答案

【问题标题】：Posting File Input as FileReader Binary Data through AJAX Post通过 AJAX Post 将文件输入作为 FileReader 二进制数据发布
【发布时间】：2012-07-09 02:42:56
【问题描述】：

我正在尝试通过 REST API 将上传到 HTML 文件输入的附件发布到网页。 API 文档指出，post 是作为 HTTP 请求正文的直接二进制内容，而不是表单文件上传。

我的代码如下：

$('#_testButton').bind('click', function () {
    var file = document.getElementById('_testFile').files[0]
    var reader = new FileReader();
    reader.onload = function () {
        $.ajax({
            url: '/attachmentURL',
            type: 'POST',
            data: reader.result
        })
    }
    reader.readAsBinaryString(file)
})

我需要它适用于许多不同的 mimeType，所以我没有在上面的代码中声明它。但是，我已尝试为 .doc 文件声明 contentType:'application/msword'，还尝试了 processData:false 和 contentType:false。

数据被发布到它应该发布的地方。但是，当我打开文件时，我收到一条消息，显示 mimeType:application/x-empty 带有一个空文件或一个带有一堆二进制字符的文件。我试过 .doc 文件和 pdf 文件，结果都是一样的。

有没有人知道我可以改变什么来完成这项工作？

【问题讨论】：

标签： jquery ajax rest filereader

【解决方案1】：

只需将file 引用作为数据发送（使用processData: false）至少对我来说已经完成了这项工作：

$('#_testButton').bind('click', function () {
    var file = document.getElementById('_testFile').files[0];

    $.ajax({
        url: "/attachmentURL",
        type: "POST",
        data: file,
        processData: false
    });
});

这里有描述：https://developer.mozilla.org/en/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data#section_3

发送字符串（即使该字符串表示二进制数据）将不起作用，因为浏览器会强制将其转换为 unicode 并编码为 utf-8 为 specified，这会损坏二进制数据：

如果数据是字符串，让编码为 UTF-8。

让 mime 类型为“text/plain;charset=UTF-8”。

让请求实体body为数据转换成Unicode编码作为 UTF-8。

发送file 参考 (blob) 将执行此操作：

如果数据是 Blob 如果对象的类型属性不为空 string 让 mime type 成为它的值。

让请求实体body为data表示的原始数据。

【讨论】：

-1：OP 说，服务器需要直接的二进制内容，而不是封装在表单数据中的内容。
@EricH。我会稍微修改一下并提出解决方案。我只是误解了你的意图。
Esailija：哈哈，看起来你用 SO 作为你的社交网络！ @埃里克。你这样做的方式对我来说很好；除非服务器正在寻找其他东西..
@Thrustmaster 现在应该将二进制数据作为 POST 数据直接发送。也测试过了。 :P
@Esailija -1 撤回，+1。 :)

【解决方案2】：

var 文件；

        $('#_testFile').on("change", function (e) {
            file = e.target.files[0];
        });
        $('#_testButton').click(function () {
            var serverUrl = '/attachmentURL';

            $.ajax({
                type: "POST",
                beforeSend: function (request) {
                    request.setRequestHeader("Content-Type", file.type);
                },
                url: serverUrl,
                data: file,
                processData: false,
                contentType: false,
                success: function (data) {
                    console.log("File available at: ", data);
                },
                error: function (data) {
                    var obj = jQuery.parseJSON(data);
                    alert(obj.error);
                }
            });
        });

【讨论】：

这个脚本用于客户端！ jQuery