如何读取本地文本文件?

我试图编写一个简单的文本文件读取器创build一个函数,该文件的path并将每行文本转换为一个字符数组,但它不工作。

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

这里怎么了?

从先前的修订中稍微改变一些代码后,这似乎仍然不起作用,现在它给了我一个XMLHttpRequestexception101。

我已经在Firefox上testing过了,但是在谷歌Chrome浏览器中,它不能工作,它一直给我一个例外101.我怎样才能得到这个工作,不仅在Firefox,而且在其他浏览器(尤其是Chrome浏览器)?

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

访问Javascripture ! 并阅读readAsText部分,并尝试这个例子。 您将能够知道FileReaderreadAsText函数如何工作。

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

可能你已经尝试过了,input“false”如下:

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

干杯:)

Jon Perryman,

是的,js可以读取本地文件(参见FileReader()),但不能自动:用户必须通过html <input type=file>将文件或文件列表传递给脚本。

然后用js可以处理(示例视图)文件或文件列表,它们的一些属性以及文件或文件内容。

出于安全原因,js不能做的是自动访问(没有用户input)到他的计算机的文件系统。

为了让js自动访问本地fs,需要创build一个不包含js的html文件,而是一个hta文件。

一个hta文件可以在其中包含js或vbs。

但是hta可执行文件只能在windows系统上运行。

这是标准的浏览器行为。

另外谷歌浏览器工作在fs api,更多信息在这里: http : //www.html5rocks.com/en/tutorials/file/filesystem/

尝试创build两个function:

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

其他的例子 – 我的阅读器与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> 

在javascript中引入了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 

这可能有帮助,

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