如何在浏览器中读取本地文本文件?

我试图通过创建一个函数来实现一个简单的文本文件阅读器，该函数接受文件的路径并将每行文本转换为字符数组，但它不起作用。

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上测试过了，它可以工作，但在谷歌Chrome中，它不会工作，它一直给我一个101例外。我怎么能让它不仅在Firefox上工作，而且在其他浏览器(尤其是Chrome)上工作?

当前回答

访问javascript !转到readAsText部分并尝试这个示例。您将能够了解FileReader的readAsText函数是如何工作的。

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]）; }; <input type='file' accept='text/plain' onchange='openFile（event）'><br> <div id='output'> ... </div>

2015-03-20 21:30:38

其他回答

尝试创建两个函数:

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

2013-10-16 23:29:49

我知道，我在派对上迟到了。让我给你看看我有什么。

这是一个简单的文本文件读取

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

我希望这能有所帮助。

2020-03-16 09:50:22

使用Fetch和async函数

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

logFileText('file.txt')

2019-01-08 13:15:36

这是一个老问题，但有两个主要观点我们必须弄清楚。我们是想读取整个文件还是逐行获取?

泰欧，我想要完整的文件然后再处理。

好的，这很简单，我们只需调用text(记住，text假设文件是UTF-8编码的)，并像这样处理文件:

const $output = document.getElementById('output') const $file = document.getElementById('file') const fetchFile = async e => { Const [file] = e.target.files Const text = await file.text() 美元输出。textContent = text ｝美元的文件。onchange = fetchFile <input id='file' type='file' accept='text/plain'><br> < pre id =“输出”>…< / >之前

那一行一行呢?这是可能的?

好吧，我的小徒弟，这也是可能的我们只需要像这样把文本分成几行

const $output = document.getElementById('output') const $file = document.getElementById('file') 让数 const fetchFile = async e => { Const [file] = e.target.files If (!file)返回计数= 0 Const text = await file.text() 美元输出。textContent = text Const lines = text.split(/\r?\n/gm) For (const line of lines) { 如果(行)计数++ ｝ console.log({数}) ｝美元的文件。onchange = fetchFile <input id='file' type='file' accept='text/plain'><br> < pre id =“输出”>…< / >之前

2022-09-28 06:36:14

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

chrome上的错误信息是这样的: “跨源请求不支持协议方案:http, data, chrome, chrome-extension, https。”

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

Firefox没有这样的限制，因此您的代码可以在Firefox上愉快地工作。然而，铬也有变通办法:请看这里。

2018-12-26 12:12:08

如何在浏览器中读取本地文本文件?

推荐文章

最新文章

标签