12

我正在尝试使用 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'

我正在使用最新版本的 Google Chrome，截至今天（2011 年 5 月 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。我在网上搜索了无数的例子，但无济于事。我怎样才能让它工作？

4

2 回答 2

14

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

var r = new FileReader();
r.onload = function(){ alert(r.result); };
r.readAsBinaryString(file);
于 2011-06-01T11:30:07.600 回答
4

想通了，我可以回电给自己，例如：

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

于 2011-06-02T16:39:06.093 回答