javascript - Chrome WebKitBlobBuilder 不附加数据

Question

我正在通过 ajax 请求实现一些文件上传功能。我希望能够在一个 ajax 调用中发送多个文件，所以我决定使用 FormData。

我试图将我的二进制数据字符串直接附加到 FormData(并且有效)，但 Content-Disposition 没有文件名属性: Content-Disposition:表单数据；名称=“文件1”

w3c 说我需要将一个 blob 对象附加到 formdata 以具有该属性(或者能够使用 FormData.append() 的第三个属性设置它)

我写了下面的代码:

function uploadAsBinary() {
    var xhr = new XMLHttpRequest();
    var fd = new FormData();

    window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
    var bb = new window.BlobBuilder();
    bb.append("this is my binary content");
    var blob = bb.getBlob("text/plain"); 

    fd.append("file1", blob, "file1");

    xhr.open("POST", "/mb/0/", false);
    xhr.send(fd);
}

它在 firefox 上工作得很好，但在 google chrome(v16 和 v17)上，请求有效负载是一个没有内容的表单数据:

------WebKitFormBoundaryVkgESMAGtmPMlPZ7
Content-Disposition: form-data; name="file1"; filename="file1"
Content-Type: text/plain


------WebKitFormBoundaryVkgESMAGtmPMlPZ7--

我还尝试通过 ArrayBuffer 填充 blob，结果相同。 我已经在网上冲浪 2 天了，我没有找到答案。我在 android (http://code.google.com/p/android/issues/detail?id=22441) 上发现了一个 Unresolved 问题，但它似乎已经死了。

这是一个真正的 chrome 问题吗？有人知道这件事吗，或者我应该在 chromium tracker 上开个 issue 吗？

感谢您的帮助!

Answer 1

对于在这里寻找解决方案的任何人来说，问题是切换到 Blob() 而不是 BlobBuilder() 作为 explained here

BlobBuilder():

window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
                 window.MozBlobBuilder || window.MSBlobBuilder;
window.URL = window.URL || window.webkitURL;

var bb = new BlobBuilder();
bb.append('body { color: red; }');
var blob = bb.getBlob('text/css');

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.URL.createObjectURL(blob);

document.body.appendChild(link);

Blob():

window.URL = window.URL || window.webkitURL;

var blob = new Blob(['body { color: red; }'], {type: 'text/css'});

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.URL.createObjectURL(blob);
document.body.appendChild(link);