使用HTML5将图像转换为二进制数组（blob）

Question

我试图在Chrome和Firefox中使用HTML5支持的'FileReader'和'File' 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年5月31日）最新版本的谷歌浏览器，版本号为11.0.696.71。根据消息来源，这种方法应该支持Chrome的最新版本。

但是似乎并没有起作用，于是我尝试使用FileReader API，但是也没有成功。我尝试了以下方法，但都无济于事：

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

但是这只会返回空值，我猜测这是因为readAsBinaryString()是一个无返回值的方法。我完全不知道如何让它在Chrome和Firefox中都能正常工作。我在网上搜索了很多示例，但都没有找到解决方法。我该怎么做才能让它正常工作？

- Kevin

Answer 1

FileReader API 是一种异步 API，因此您需要改为执行类似以下操作：

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

- Ilmari Heikkinen

---

我们需要传递什么变量文件..图片网址吗？ - vimal kumar

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传递给自己。

- Kevin