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>

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>

尝试创建两个函数:

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

在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文件工作。

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