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'

私はGoogleChromeの最新バージョンを使用しています。これは今日（2011-05-31）のバージョン：11.0.696.71であり、情報源によると、この方法は最新バージョンのChromeでサポートされていると思われます。

それはうまくいかなかったので、私はAPIを使おうとしましたFileReaderが、それもうまくいきませんでした。私はこれを無駄にしようとしました：

$('#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 に答える