如何读取本地文本文件？

最新推荐文章于 2023-04-28 15:55:44 发布

翻译最新推荐文章于 2023-04-28 15:55:44 发布 · 504 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://oldbug.net/q/ycBD/How-to-read-a-local-text-file

文章标签：

#javascript #file-io #xmlhttprequest

本文探讨了解决XMLHttpRequest异常101的方法，详细解释了如何在不同浏览器（包括Chrome和Firefox）中正确读取本地文本文件。通过调整代码并使用特定的文件路径格式，可以确保跨浏览器的兼容性。

本文翻译自：How to read a local text file?

I'm trying to write a simple text file reader by creating a function that takes in the file's path and converts each line of text into a char array, but it's not working. 我正在尝试通过创建一个接受文件路径并将文本的每一行转换为char数组的函数来编写一个简单的文本文件阅读器，但是它不起作用。

function readTextFile() {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", "testing.txt", true);
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4) {
      var allText = rawFile.responseText;
      document.getElementById("textSection").innerHTML = allText;
    }
  }
  rawFile.send();
}

What is going wrong here? 这是怎么了？

This still doesn't seem to work after changing the code a little bit from a previous revision and now it's giving me an XMLHttpRequest exception 101. 从以前的版本中稍稍更改了代码后，这似乎仍然不起作用，现在它给了我一个XMLHttpRequest异常101。

I've tested this on Firefox and it works, but in Google Chrome it just won't work and it keeps giving me an Exception 101. How can I get this to work on not just Firefox, but also on other browsers (especially Chrome)? 我已经在Firefox上对其进行了测试，并且可以运行，但是在Google Chrome中它无法正常工作，并且一直给我一个异常101。如何使它不仅可以在Firefox上而且还可以在其他浏览器（尤其是Chrome）上运行）？

#1楼

参考：https://stackoom.com/question/ycBD/如何读取本地文本文件

#2楼

You need to check for status 0 (as when loading files locally with XMLHttpRequest , you don't get a status returned because it's not from a Webserver ) 您需要检查状态0（如使用XMLHttpRequest在本地加载文件时，不会返回状态，因为它不是来自Webserver ）

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

And specify file:// in your filename: 并在文件名中指定file:// ：

readTextFile("file:///C:/your/path/to/file.txt");

#3楼

Try creating two functions: 尝试创建两个函数：

function getData(){       //this will read file and send information to other function
       var xmlhttp;

       if (window.XMLHttpRequest) {
           xmlhttp = new XMLHttpRequest();               
       }           
       else {               
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");               
       }

       xmlhttp.onreadystatechange = function () {               
           if (xmlhttp.readyState == 4) {                   
             var lines = xmlhttp.responseText;    //*here we get all lines from text file*

             intoArray(lines);     *//here we call function with parameter "lines*"                   
           }               
       }

       xmlhttp.open("GET", "motsim1.txt", true);
       xmlhttp.send();    
}

function intoArray (lines) {
   // splitting all text data into array "\n" is splitting data from each new line
   //and saving each new line as each element*

   var lineArr = lines.split('\n'); 

   //just to check if it works output lineArr[index] as below
   document.write(lineArr[2]);         
   document.write(lineArr[3]);
}

#4楼

可能您已经尝试过，键入“ false”，如下所示：

 rawFile.open("GET", file, false);

#5楼

other example - my reader with FileReader class 另一个例子-我的FileReader类的阅读器

<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>

#6楼

Visit Javascripture ! 访问Javascripture ！ And go the section readAsText and try the example. 然后进入readAsText部分并尝试示例。 You will be able to know how the readAsText function of FileReader works. 您将能够知道FileReader的readAsText函数如何工作。

    <html>
    <head>
    <script>
      var openFile = function(event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function(){
          var text = reader.result;
          var node = document.getElementById('output');
          node.innerText = text;
          console.log(reader.result.substring(0, 200));
        };
        reader.readAsText(input.files[0]);
      };
    </script>
    </head>
    <body>
    <input type='file' accept='text/plain' onchange='openFile(event)'><br>
    <div id='output'>
    ...
    </div>
    </body>
    </html>