使用 FileReader 读取文本文件答案

【问题标题】：Read text file using FileReader使用 FileReader 读取文本文件
【发布时间】：2012-09-04 12:24: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>

使用萤火虫我在var contents = theFile.target.result; 上设置了一个中断，但没有返回任何内容。任何人都可以发现问题所在吗？

谢谢

【问题讨论】：

看到这个stackoverflow.com/a/44760709/1244696

标签： javascript html

【解决方案1】：

尝试（关闭加载）：

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);
    }
}

【讨论】：

【解决方案2】：

我的例子

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    </head>
    <body>
        <script>
            function PreviewText() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadText").files[0]);
            oFReader.onload = function (oFREvent) {
                document.getElementById("uploadTextValue").value = oFREvent.target.result; 
                document.getElementById("obj").data = oFREvent.target.result;
            };
        };
        jQuery(document).ready(function(){
            $('#viewSource').click(function ()
            {
                var text = $('#uploadTextValue').val();
                alert(text);
                //here ajax
            });
        });
        </script>
        <object width="100%" height="400" data="" id="obj"></object>
        <div>
            <input type="hidden" id="uploadTextValue" name="uploadTextValue" value="" />
            <input id="uploadText" style="width:120px" type="file" size="10"  onchange="PreviewText();" />
        </div>
        <a href="#" id="viewSource">Source file</a>
    </body>
</html>

【讨论】：