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

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


当前回答

如何读取本地文件?

通过使用这个,你将通过loadText()加载一个文件,然后JS将异步等待,直到文件被读取和加载之后,它将执行readText()函数,允许你继续使用正常的JS逻辑(你也可以在loadText()函数上写一个try catch块,以防出现任何错误),但在这个例子中,我将它保持在最小。

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

其他回答

在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中测试)。

更新2(免责声明):

此技术不适用于版本68(2019年7月9日)以上的Firefox,原因与Chrome相同(安全):CORS请求而不是HTTP。见https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp。

你可以导入我的库: < script src = " https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js?pe=yikuansun2015@gmail.com " > < /脚本>

然后,函数fetchfile(path)将返回上传的文件 < script src = " https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js " > < /脚本> < >脚本console.log (fetchfile(“file.txt”))> < /脚本

请注意:在谷歌Chrome浏览器上,如果HTML代码是本地的,会出现错误,但在线保存HTML代码和文件,然后运行在线HTML文件工作。

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 -谷歌chrome和mozilla firefox在我的情况下,我有这样的文件结构:

console.log结果:

使用Fetch和async函数

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

logFileText('file.txt')

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