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'

我正在使用最新版Google Chrome，截至今日（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);

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

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

2 个答案: