如何读取本地文本文件？

370

我正在尝试通过创建一个接受文件路径并将文本的每一行转换为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();
}

这是怎么了？

从先前的版本中稍稍更改了代码后，这似乎仍然不起作用，现在给了我一个XMLHttpRequest例外101。

我已经在Firefox上对其进行了测试，并且可以工作，但是在Google Chrome中它却无法工作，并且一直给我一个异常101。如何使它不仅可以在Firefox上而且还可以在其他浏览器（尤其是Chrome）上运行）？

javascript  file-io  xmlhttprequest 
— 丹尼
source
具体发生了什么。数组中没有任何内容吗？还是只是“错误”的东西..？
— PinkElephantsOnParade
您是否正在本地计算机上进行测试？务必使测试了status的0，以及200。
— Jeffrey Sweeney 2013年
1
@JeffreySweeney是的，我正在本地计算机上对此进行测试。我已将文本文件存储在与javascript和html相同的位置
— Danny

Answers:

311

您需要检查状态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);
}

并file://在文件名中指定：

readTextFile("file:///C:/your/path/to/file.txt");
— 马吉德·莱西
source
2
我实际上是在Mac上进行这项工作，所以我仍要指定file：// ??
— Danny
11
尽量把file:///User/Danny/Desktop/javascriptWork/testing.txt你的浏览器的地址栏，看看您是否可以看到该文件..
— 马吉德Laissi
21
它不需要是绝对路径。.对我来说这很好：readTextFile（'Properties / version.txt'）; 谢谢！
— Sonic Soul
2
由于我们正在从网络服务器上进行读取，因此我们应将异步设置为true。如果这是简单的local搜索，则将async设置为false可以，但是onreadystatechange将其设置为false时不需要。这里是文档：w3schools.com/ajax/ajax_xmlhttprequest_send.asp
— rambossa 2015年
149
这将在Chrome（可能的其他浏览器）中不起作用，您将获得“仅协议方案支持跨源请求：http，数据，chrome，chrome-chrome扩展名，https，chrome-extension-resource”。
— 里克·伯吉斯
102

访问Javascripture！然后进入readAsText部分并尝试示例。您将能够知道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>
— 阿米特·查拉西亚（Amit Chaurasia）
source
14
链接很好，但是您应该“始终引用重要链接中最相关的部分，以防目标站点无法访问或永久脱机”。请参阅如何写一个好的答案。
— 2015年
16
此示例处理用户输入的文本文件，但我认为问题在于服务器本地的文件。
— S. Kirby 2015年
正如OP在回答有关它是在本地还是在远程服务器上运行的问题时所说的那样：@ S.Kirby 都是本地的。全部放在一个文件夹中。。此外，其他人（例如我）可能对如何在本地进行操作有疑问。
— 西蒙·佛斯伯格
102

在javascript中引入fetch api之后，读取文件内容再简单不过了。

读取文本文件

fetch('file.txt')
  .then(response => response.text())
  .then(text => console.log(text))
  // outputs the content of the text file

读取json文件

fetch('file.json')
  .then(response => response.json())
  .then(jsonResponse => console.log(jsonResponse))     
   // outputs a javascript object from the parsed json

更新30/07/2018（免责声明）：

这项技术在Firefox中可以正常工作，但似乎Chrome的fetch实现file:///在编写此更新之日不支持URL方案（已在Chrome 68中进行测试）。

Update-2（免责声明）：

出于与Chrome浏览器相同的（安全性）原因，此技术不适用于版本68（2019年7月9日）以上的FirefoxCORS request not HTTP。请参阅https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp。

— 阿卜杜勒阿齐兹·莫赫纳什
source
4
辉煌！引用获取标准：“提供一致的处理：URL方案，重定向，跨域语义，CSP，服务工作者，混合内容Referer”。我想这意味着对ol'FileReaders和HttpRequests的再见（我不会再错过它们了；）
— Armfoot
1
但是如何使用文本并将其放入字符串变量中以供其他地方使用？（无论我做什么，我都会不断得到“不确定的”。）
— not2qubit
2
@ not2qubit提取文本文件是异步操作。之所以变得未定义，是因为在完全读取文件之前使用了变量。您必须在promise回调中使用它，或使用类似javascript“ async await”运算符的方法。
— 阿卜杜拉齐兹Mokhnache
13
Fetch API cannot load file:///C:/Users/path/to/file/file.txt. URL scheme must be "http" or "https" for CORS request.
— Jacob Schneider
1
— 山姆·墨菲
39 

var input = document.getElementById("myFile");
var output = document.getElementById("output");


input.addEventListener("change", function () {
  if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();
    
    reader.addEventListener('load', function (e) {
      output.textContent = e.target.result;
    });
    
    reader.readAsBinaryString(myFile);
  }   
});
<input type="file" id="myFile">
<hr>
<textarea style="width:500px;height: 400px" id="output"></textarea>
展开摘要

— Poornachander K
source
9
我不确定这是否会回答这个已有4年历史的问题。OP并未上传文档，而是试图从路径读取同一目录中的文本文件。而且，如果您要回答这个古老的问题，请至少写一个简短的摘要，说明为什么您认为自己的答案现在比其他答案更好，或者自问题问世后语言已发生变化以保证有新的答案。
— 马修·恰亚拉米塔罗
1
使用我自己的现有文件上传输入html-复制var reader = new FileReader();通过的行reader.readAsBinaryString(..)-它读取我的文本文件的内容。干净，优雅，就像魅力。对我来说，此主题的最佳答案-谢谢！
— Gene Bo
18

乔恩·佩里曼

是的，js可以读取本地文件（请参阅FileReader（）），但不能自动读取：用户必须使用html将文件或文件列表传递给脚本<input type=file>。

然后，使用js可以处理（示例视图）文件或文件列表，它们的某些属性以及文件内容。

出于安全原因，js无法执行的操作是自动（无需用户输入）访问其计算机的文件系统。

要允许js自动访问本地fs，需要创建一个不在其中的带有js的html文件，而是创建一个hta文档。

hta文件中可以包含js或vb。

但是hta可执行文件仅适用于Windows系统。

这是标准的浏览器行为。

谷歌浏览器也在fs api上工作，更多信息请参见：http：//www.html5rocks.com/en/tutorials/file/filesystem/

— 麻雀
source
这是我在寻找的评论。每个人都将用于用户输入文件的代码作为输入标签，但是问题是用户自动从代码中提到的路径中获取文件。谢谢！
— Kumar Kartikeya
13

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

 rawFile.open("GET", file, false);
— 摩门
source
12

尝试创建两个函数：

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]);
}
— Motsim Mansoor
source
对于什么浏览器来说，这项工作有效（似乎有6个人尝试过：
— Xan-Kun Clark-Davis
11

另一个例子-我的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>
— 网络天空
source
2
文件返回base64输出
— VP
6

使用提取和异步功能

const logFileText = async file => {
    const response = await fetch(file)
    const text = await response.text()
    console.log(text)
}

logFileText('file.txt')
— barro32
source
7
我收到“ URL方案对于CORS请求必须为“ http”或“ https”。
— Qwerty
谢谢，为我工作！
— oscarAguayo
5

这可能会有所帮助， 

    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET", "sample.txt", true);
    xmlhttp.send();
— Sameera R.
source
5

现代解决方案：

<input type="file" onchange="this.files[0].text().then(t => console.log(t))">

当用户通过该输入上传文本文件时，该文本文件将被记录到控制台。这是一个有效的jsbin演示。

这是更详细的版本：

<input type="file" onchange="loadFile(this.files[0])">
<script>
  async function loadFile(file) {
    let text = await file.text();
    console.log(text);
  }
</script>

当前（2020年1月）仅在Chrome和Firefox中有效，如果将来要阅读此内容，请在此处查看兼容性：https : //developer.mozilla.org/zh-CN/docs/Web/API/Blob/text

在较旧的浏览器上，这应该可以工作：

<input type="file" onchange="loadFile(this.files[0])">
<script>
  async function loadFile(file) {
    let text = await (new Response(file)).text();
    console.log(text);
  }
</script>
— 乔
source
2

除了上述答案外，此修改后的解决方案对我也有效。

<input id="file-upload-input" type="file" class="form-control" accept="*" />

....

let fileInput  = document.getElementById('file-upload-input');
let files = fileInput.files;

//Use createObjectURL, this should address any CORS issues.
let filePath = URL.createObjectURL(files[0]);

....

function readTextFile(filePath){
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", filePath , true);
    rawFile.send(null);

    rawFile.onreadystatechange = function (){
        if(rawFile.readyState === 4){
            if(rawFile.status === 200 || rawFile.status == 0){
                var allText = rawFile.responseText;
                console.log(allText);
            }
        }
    }     
}
— 法比
source
2 
function readTextFile(file) {
    var rawFile = new XMLHttpRequest(); // XMLHttpRequest (often abbreviated as XHR) is a browser object accessible in JavaScript that provides data in XML, JSON, but also HTML format, or even a simple text using HTTP requests.
    rawFile.open("GET", file, false); // open with method GET the file with the link file ,  false (synchronous)
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4) // readyState = 4: request finished and response is ready
        {
            if(rawFile.status === 200) // status 200: "OK"
            {
                var allText = rawFile.responseText; //  Returns the response data as a string
                console.log(allText); // display text on the console
            }
        }
    }
    rawFile.send(null); //Sends the request to the server Used for GET requests with param null
}

readTextFile("text.txt"); //<= Call function ===== don't need "file:///..." just the path

-从javascript中读取文件文本
-使用javascript从文件中获取控制台日志文本
-

就我而言，Google chrome和mozilla firefox具有以下文件结构：在此处输入图片说明

console.log结果：
在此处输入图片说明

— 纳迪尔·哈米杜
source
下面是显示的错误：CORS策略已阻止从来源“ null”访问“ file：/// C：/ {myLocalPath} PropertiesFile.txt”处的XMLHttpRequest：协议方案仅支持跨来源请求：http，数据，chrome，chrome扩展名，https。
— Kumar Kartikeya
1 
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {            
                $.ajax({`enter code here`
                    url: "TextFile.txt",
                    dataType: "text",
                    success: function (data) {                 
                            var text = $('#newCheckText').val();
                            var str = data;
                            var str_array = str.split('\n');
                            for (var i = 0; i < str_array.length; i++) {
                                // Trim the excess whitespace.
                                str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
                                // Add additional code here, such as:
                                alert(str_array[i]);
                                $('#checkboxes').append('<input type="checkbox"  class="checkBoxClass" /> ' + str_array[i] + '<br />');
                            }
                    }                   
                });
                $("#ckbCheckAll").click(function () {
                    $(".checkBoxClass").prop('checked', $(this).prop('checked'));
                });
        });
    </script>
</head>
<body>
    <div id="checkboxes">
        <input type="checkbox" id="ckbCheckAll" class="checkBoxClass"/> Select All<br />        
    </div>
</body>
</html>
— 阿迪蒂亚
source
1

在js（data.js）加载中获取本地文件数据：

function loadMyFile(){
    console.log("ut:"+unixTimeSec());
    loadScript("data.js?"+unixTimeSec(), loadParse);
}
function loadParse(){
    var mA_=mSdata.split("\n");
    console.log(mA_.length);
}
function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*![^\r\n]*[\r\n]*/, "").
      replace(/[\r\n][^\r\n]*\*\/[^\/]+$/, "");
}
function unixTimeSec(){
    return Math.round( (new Date()).getTime()/1000);
}

data.js文件，例如：

var mSdata = hereDoc(function() {/*!
17,399
1237,399
BLAHBLAH
BLAHBLAH
155,82
194,376
*/});

动态unixTime queryString防止缓存。

AJ在网站http：//中工作。

— 罗维加
source
为什么不对多行字符串使用ES6模板文字语法？（见developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...）
— Sapphire_Brick
1

由于同源策略，不支持Chrome中的本地AJAX调用。

chrome上的错误消息是这样的：“协议方案不支持跨源请求：http，数据，chrome，chrome扩展名，https。”

这意味着chrome为每个域创建一个虚拟磁盘，以使用http / https协议保留该域提供的文件。对该虚拟磁盘外部文件的任何访问都受到同一原始策略的限制。AJAX请求和响应发生在http / https上，因此不适用于本地文件。

Firefox没有设置此类限制，因此您的代码可以在Firefox上愉快地工作。但是，Chrome也有解决方法：请参见此处。

— 速溶T
source
0

您可以导入我的库： 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js?pe=yikuansun2015@gmail.com"></script>
展开摘要

然后，该函数fetchfile(path)将返回上传的文件 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js"></script>
<script>console.log(fetchfile("file.txt"))</script>
展开摘要

请注意：在Google Chrome上，如果HTML代码是本地代码，则会出现错误，但可以先保存HTML代码和文件，然后再运行在线HTML文件。

0

为了JavaScript使用chrome 读取本地文件文本，chrome浏览器应使用--allow-file-access-from-files允许JavaScript访问本地文件的参数运行，然后可以使用XmlHttpRequest以下命令读取它：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
   if (xmlhttp.readyState == 4) {
       var allText = xmlhttp.responseText;          
            }
        };
xmlhttp.open("GET", file, false);
xmlhttp.send(null);
— 阿里·埃扎特·奥德（Ali Ezzat Odeh）
source
0

如何读取本地文件？

通过使用此方法，您将通过loadText（）加载文件，然后JS将异步等待，直到读取并加载该文件，之后它将执行readText（）函数，使您可以继续使用常规的JS逻辑（也可以编写try catch在出现任何错误的情况下在loadText（）函数上阻止），但对于本示例，我将其保持在最低限度。

async function loadText(url) {
    text = await fetch(url);
    //awaits for text.text() prop 
    //and then sends it to readText()
    readText(await text.text());
}

function readText(text){
    //here you can continue with your JS normal logic
    console.log(text);
}

loadText('test.txt');
— 斯纳普
source
似乎您患有功能性炎
— Sapphire_Brick
0

我知道，我在这个聚会上迟到了。让我告诉你我所拥有的。

这是文本文件的简单阅读

var path = C:\\established-titles\\orders\\shopify-orders.txt
var fs = require('fs')
fs.readFile(path , 'utf8', function(err, data) {
  if (err) throw err;
  console.log('OK: ' + filename);
  console.log(data)
});

我希望这有帮助。

— 阿尔约翰·雅马罗
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.