58

FileReader オブジェクトを使用して、ファイルを読み取り、base64 でエンコードされた文字列に変換したいと考えています。私が使用するコードは次のとおりです。

    var リーダー = 新しい FileReader();
    reader.onloadend = 関数(evt) {  
        // ファイルが読み込まれます
        result_base64 = evt.target.result;
    };
    reader.readAsDataURL(ファイル);

ただし、この場合、イベント ハンドラー (onLoadEnd イベント) で変換の結果を取得します。同期メソッドが欲しいです。「readAsDataURL」メソッドが「result_base64」変数の値を直接返す方法はありますか?

4

6 に答える 6

16

同期タスク (ブロッキング) は一般的に良くありません。それを同期的に行う本当の理由がない場合は、イベント コールバックを使用することを強くお勧めします。

ファイルが壊れていて、HTML5 API が読み取れず、結果が得られないと想像してください。コードが破損し、サイトがブロックされます。または、誰かが 10 GB のファイルを選択すると、ファイルが完全に読み込まれるまで HTML ページがフリーズします。その非同期イベント ハンドラーを使用すると、発生する可能性のあるエラーをキャッチできます。

コールバックの制限を回避するには、次の簡単な方法を使用します。

var ready = false;
var result = '';

var check = function() {
    if (ready === true) {
         // do what you want with the result variable
         return;
    }
    setTimeout(check, 1000);
}

check();

var reader = new FileReader();
reader.onloadend = function(evt) {
    // file is loaded
    result = evt.target.result;
    
    ready = true;
};
reader.readAsDataURL(file);

check 関数は、ready フラグ変数が true に設定されているかどうかを毎秒チェックします。その場合は、結果が利用可能であることを確認できます。

そうするのはベスト プラクティスではないかもしれませんが、この手法を使用して約 30 回、同時に 10 以上の setTimeouts を実行する Web アプリケーションを作成しましたが、今まで問題は発生しませんでした。

于 2013-07-05T14:43:41.087 に答える