使用HTML5将图像转换为二进制数组(blob)

Question

我正在尝试使用Chrome和Firefox中HTML5支持的"FileReader"和"文件"API将图像转换为二进制数组,但它似乎无法在Chrome上正常运行.我只有一个简单的HTML页面,其中包含一个文件作为输入类型:

<input id="image_upload" type="file" />

从这里我使用jQuery来获取图像的内容,然后使用API​​:File.getAsBinary()将其转换为二进制数组.这适用于Firefox,但不适用于Chrome:

$('#image_upload').change(function() {
    var fileList = this.files;
    var file = fileList[0];
    var data =  file.getAsBinary();
            //do something with binary
});

当此方法在Chrome上执行时,我在控制台中收到错误消息:

uncaught TypeError: Object #<File> has no method 'getAsBinary'

我正在使用最新版本的谷歌浏览器,截至今日(2011-05-31)版本:11.0.696.71,根据消息来源,该方法应该支持最新版本的Chrome.

这似乎没有用,所以我试图使用FileReaderAPI,也没有任何运气.我试过这样做无济于事:

$('#image_upload').change(function() {
    var fileList = this.files;
    var file = fileList[0];
    var r = new FileReader();
    r.readAsBinaryString(file);
    alert(r.result);
]);

但是这只会返回我认为是因为readAsBinaryString()是一种void方法.我完全不知道如何让这个适用于Chrome和Firefox.我在网上搜索了无数的例子但无济于事.我怎样才能让它运转起来？

Answer 1

FileReader API是一个异步API,因此您需要执行以下操作:

var r = new FileReader();
r.onload = function(){ alert(r.result); };
r.readAsBinaryString(file);

Answer 2

我发现我可以给自己回电，例如：

create_blob(file, function(blob_string) { alert(blob_string) });

function create_blob(file, callback) {
    var reader = new FileReader();
    reader.onload = function() { callback(reader.result) };
    reader.readAsDataURL(file);
}

这非常有效。一旦完成，我就可以将从 onload 函数返回的 blob 传递给自己。