36

私はJS FileReaderを使用しています。ファイルの読み取り操作後に結果を取得し、このデータを操作したいと考えています。FileReader は非同期であり、結果がいつ準備できるかわかりません。それを正しく行う方法は？

$(document).ready(function(){
    $('#file_input').on('change', function(e){
        var res = readFile(this.files[0]);

        //my some manipulate with res

        $('#output_field').text(res);
    });
});

function readFile(file){
    var reader = new FileReader(),
        result = 'empty';

    reader.onload = function(e)
    {
        result = e.target.result;
    };

    reader.readAsText(file);

    //waiting until result is empty?

    return result;
}

http://jsfiddle.net/ub22m/4/

それは「空」を示しています。

「結果」が空になるまで待つ方法は? 別の方法？

4

4 に答える 4

56

読み取りは非同期で行われます。onload読み取りが完了したときに何が起こるかを定義するカスタム コールバックを提供する必要があります。

$(document).ready(function(){
    $('#file_input').on('change', function(e){
        readFile(this.files[0], function(e) {
            // use result in callback...
            $('#output_field').text(e.target.result);
        });
    });
});

function readFile(file, onLoadCallback){
    var reader = new FileReader();
    reader.onload = onLoadCallback;
    reader.readAsText(file);
}

(フィドルを参照してください。)

readFileは値を返さないことに注意してください。代わりに、読み取りが完了するたびに起動するコールバック関数を受け入れます。$('#output_field').text操作はコールバック関数に移動されます。onloadこれにより、リーダーのコールバックが発生するまで操作が実行されないことが保証e.target.resultされます。

コールバックを使用したプログラミングは、最初は少し難しいですが、高度な機能を実装するには絶対に必要です。

于 2012-08-06T14:18:46.177 に答える
2

これがJavaScriptです：

$(document).ready(function() {
    $('#file_input').on('change', function(e) {

        function updateProgress(evt) {
            if (evt.lengthComputable) {
                // evt.loaded and evt.total are ProgressEvent properties
                var loaded = (evt.loaded / evt.total);
                if (loaded < 1) {
                    // Increase the prog bar length
                    style.width = (loaded * 200) + "px";
                }
            }
        }

        function loaded(evt) {
            // Obtain the read file data    
            var fileString = evt.target.result;
            // Handle UTF-16 file dump
            $('#output_field').text(fileString);
        }
        var res = readFile(this.files[0]);

        var reader = new FileReader();

        reader.readAsText(this.files[0], "UTF-8");

        reader.onprogress = updateProgress;
        reader.onload = loaded;


    });
});

function readFile(file) {
    var reader = new FileReader(),
        result = 'empty';

    reader.onload = function(e) {
        result = e.target.result;
    };

    reader.readAsText(file);

    return result;
}

そしてもちろん、HTML 部分:

<input type="file" id="file_input" class="foo" />
<div id="progBar" style="background-color:black;width:1px;"> </div>
<div id="output_field" class="foo"></div>

*.txt ファイルで動作するようです。

このフィドルを参照してください。

于 2012-08-06T14:12:58.667 に答える