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

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

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)上工作?

当前回答

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

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

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

其他回答

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

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

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

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

2018-12-26 12:12:08

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

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

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

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

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

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

好的，这很简单，我们只需调用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

此函数适用于浏览器和打开文件选择对话框，在用户选择后将文件读取为二进制并调用读取数据的回调函数:

function pickAndReadFile(callback) {
    var el = document.createElement('input');
    el.setAttribute('type', 'file');
    el.style.display = 'none';
    document.body.appendChild(el);
    el.onchange = function (){
        const reader = new FileReader();
        reader.onload = function () {
            callback(reader.result);
            document.body.removeChild(el);
        };
        reader.readAsBinaryString(el.files[0]);
    }
    el.click();
}

像这样使用它:

pickAndReadFile(data => {
  console.log(data)
})

2021-12-19 08:24:04

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

推荐文章

最新文章

标签