15

.txt ファイルの内容を読み取ろうとして、次のコードを作成しました。

<!DOCTYPE html>
<html>

<input type="file" id="files" name="file" />
<div id="container" style="height: 500px; min-width: 500px"></div>

<script>
    function handleFileSelect(evt) 
    {
        var files = evt.target.files; // FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) 
        {

            var reader = new FileReader();
            reader.onload = (function(theFile) 
            {
                var contents = theFile.target.result;
                    var lines = contents.split('\n');

            })(f);

            reader.readAsText(f);
        }
    }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</html>

firebug を使用してブレークを設定しましたvar contents = theFile.target.result;が、何も返されません。誰が何が間違っているかを見つけることができますか?

ありがとうございました

4

2 に答える 2

23

試してください（クロージャーでオンロード）：

function handleFileSelect(evt)
{
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++)
    {

        var reader = new FileReader();
        reader.onload = (function(reader)
        {
            return function()
            {
                var contents = reader.result;
                var lines = contents.split('\n');
                //////
                document.getElementById('container').innerHTML=contents;
            }
        })(reader);

        reader.readAsText(f);
    }
}

または（閉鎖なし）：

function handleFileSelect(evt)
{
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++)
    {

        var reader = new FileReader();
        reader.onload = function(event)
        {
            // NOTE: event.target point to FileReader
            var contents = event.target.result;
            var lines = contents.split('\n');
            //////
            document.getElementById('container').innerHTML=contents;
        };

        reader.readAsText(f);
    }
}
于 2012-09-11T15:04:13.253 に答える