file - 使用 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-05-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() 是一个 void 方法。我完全不知道如何使它同时适用于 Chrome 和 Firefox。我在网上搜索了无数示例，但无济于事。我怎样才能让它工作？

Answer 1

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

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