jQuery.ajax 模拟 POST 文件上传，不发送 UTF-8 内容

Question

开始之前：这是一个 100% 的客户端问题。忘记服务器端语言，我如何处理上传等等——我将一个已知的工作 HTTP 文件上传请求与一个 jQuery 生成的 AJAX 请求进行比较，理论上应该做同样的事情。

背景：我正在为 tinyMCE 编写文件上传插件。其中一部分涉及允许为支持它的浏览器上传拖放图像——具体来说，当文件系统图像被拖放到 tinyMCE 编辑器中时，firefox 中的 tinyMCE 会创建一个带有 base64 src 的 img。这是我目前的用例，以后可能会扩展。

我的目标是获取 base64 数据并使用 jQuery 模拟表单提交以将其上传到服务器。我已经有了一个正常的基于 HTML 表单的方法。

获取base64数据是小菜一碟：

$('img[src^="data:"]', ed.getDoc()).each(function(){
    var data = /data:(image\/\w+);base64,(.*)/gmi.exec(this.src), format, ext;
    if (data){
        format = data[1];
        ext = format.split('/')[1];
        data = atob(data[2]);
    }
    else{
        // blah, not supported
    }
});

准备 POST 数据同样简单：

var boundary = '--------------------boundary' + (new Date).getTime();
data = '\r\n' + boundary + '\r\n' +
        'Content-Disposition: form-data; name="file-upload"; filename="uploaded_image.' + ext + '"\r\n' +
        'Content-Type: ' + format + '\r\n\r\n' +
        data + '\r\n' +
        boundary + '--'
        ;

剩下的就是将其发送到服务器：

$.ajax({
    type: 'POST',
    url: '/upload/',
    contentType: 'multipart/form-data; boundary=' + boundary.slice(2),
    data: data
});

服务器“正确”处理 POST（它可以看到文件并将其保存到磁盘上），但生成的图像已严重损坏——它不会显示在浏览器中，并且它的 jpeg header 完全错了，更不用说它比本地大 33%（服务器上 12K 与本地 9K）。

使用 Firebug 的 Net 选项卡，看起来并没有什么问题——事实上，除了 Content-Type 请求标头中的额外 charset=UTF-8 和缺少漂亮打印的 POST 数据之外，这个 AJAX 请求看起来一模一样 em> 喜欢对应的表单 POST。但是，使用HttpFox 会讲述一个不同的故事：

表单上传：

-----------------------------191891488320550623041315726177
Content-Disposition: form-data; name="file-upload"; filename="file.jpg"
Content-Type: image/jpeg

ÿØÿàJFIFHHÿÛC...

ajax 上传：

--------------------boundary1375846064929
Content-Disposition: form-data; name="file-upload"; filename="file.jpeg"
Content-Type: image/jpeg

ÿÃÿà JFIFHHÿÃC...

我还注意到请求的 Content-Length 值有所不同，再次相差约 33%。所以看起来，无论出于何种原因，jQuery 生成的 POST 请求实际上并没有以 UTF-8 格式发送？我错过了什么，这个谜题的最后一块是什么？

Answer 1

最终解决方案是使用 Typed Arrays 和 XHR2 的 FormData（polyfills 可用于两者，但目前两者都享有重要的原生支持）。

images.each(function(){
    var image = this,
        data = /data:(image\/\w+);base64,(.*)/gmi.exec(this.src),
        format, ext, binary;
    if (data){
        format = data[1];
        ext = format.split('/')[1];
        binary = atob(data[2]);
        data = new Uint8Array(binary.length);
        for (var i=0; i<binary.length; i++)
            data[i] = binary.charCodeAt(i);
    }
    else {
        // blah, not supported
    }

    var fd = new FormData();
    fd.append('file-upload', new Blob([data], {type: format}), 'uploaded_image.' + ext);

    $.ajax({
        type: 'POST',
        url: '/upload/',
        data: fd,
        processData: false,
        contentType: false
    });
});