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

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

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

1704321 次浏览
小开
最佳答案

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

尝试创建两个函数:

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

可以证明你已经尝试过了，输入“false”如下所示:

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

另一个例子-我的阅读器与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>
小开

访问Javascripture !然后进入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>

小开

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

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

出于安全原因，JS不能自动(不需要用户输入)访问其计算机的文件系统。

为了允许JS自动访问本地fs，需要创建一个hta文档而不是一个包含JS的html文件。

hta文件可以包含JS和VBS。

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

这是标准的浏览器行为。

也谷歌Chrome在fs API工作，更多信息在这里:http://www.html5rocks.com/en/tutorials/file/filesystem/

小开

这可能会有帮助，

    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>

小开

在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

更新30/07/2018(免责声明):

此技术在火狐中工作良好，但似乎铬的fetch实现在编写此更新时不支持file:/// URL方案(在Chrome 68中测试)。

更新2(免责声明):

由于与Chrome: CORS request not HTTP相同的(安全)原因，此技术不适用于版本68(2019年7月9日)以上的火狐。看到https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp。

小开 
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({`enter code here`
url: "TextFile.txt",
dataType: "text",
success: function (data) {
var text = $('#newCheckText').val();
var str = data;
var str_array = str.split('\n');
for (var i = 0; i < str_array.length; i++) {
// Trim the excess whitespace.
str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
// Add additional code here, such as:
alert(str_array[i]);
$('#checkboxes').append('<input type="checkbox"  class="checkBoxClass" /> ' + str_array[i] + '<br />');
}
}
});
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
});
</script>
</head>
<body>
<div id="checkboxes">
<input type="checkbox" id="ckbCheckAll" class="checkBoxClass"/> Select All<br />
</div>
</body>
</html>
小开

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

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

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

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

小开

加上上面的一些答案，这个修改后的解决方案对我来说很有效。

<input id="file-upload-input" type="file" class="form-control" accept="*" />

．...

let fileInput  = document.getElementById('file-upload-input');
let files = fileInput.files;


//Use createObjectURL, this should address any CORS issues.
let filePath = URL.createObjectURL(files[0]);

．...

function readTextFile(filePath){
var rawFile = new XMLHttpRequest();
rawFile.open("GET", filePath , true);
rawFile.send(null);


rawFile.onreadystatechange = function (){
if(rawFile.readyState === 4){
if(rawFile.status === 200 || rawFile.status == 0){
var allText = rawFile.responseText;
console.log(allText);
}
}
}
}
小开
你可以导入我的库: 
<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js?pe=yikuansun2015@gmail.com"></script>

then, the function fetchfile(path) will return the uploaded file 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js"></script>
<script>console.log(fetchfile("file.txt"))</script>

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

小开

为了使用chrome通过JavaScript读取本地文件文本，chrome浏览器应该运行参数--allow-file-access-from-files以允许JavaScript访问本地文件，然后你可以像下面这样使用XmlHttpRequest读取它:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
var allText = xmlhttp.responseText;
}
};
xmlhttp.open("GET", file, false);
xmlhttp.send(null);
小开

使用获取和async函数

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


logFileText('file.txt')
小开 
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
< p > -从javascript读取文件文本 < br > -控制台日志文本从文件使用javascript
-谷歌chrome浏览器和firefox浏览器

在我的情况下，我有这样的文件结构:enter image description here

the console.log result:
enter image description here .log

小开

在js(data.js) load中获取本地文件数据:

function loadMyFile(){
console.log("ut:"+unixTimeSec());
loadScript("data.js?"+unixTimeSec(), loadParse);
}
function loadParse(){
var mA_=mSdata.split("\n");
console.log(mA_.length);
}
function loadScript(url, callback){


var script = document.createElement("script")
script.type = "text/javascript";


if (script.readyState){  //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else {  //Others
script.onload = function(){
callback();
};
}


script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
function hereDoc(f) {
return f.toString().
replace(/^[^\/]+\/\*![^\r\n]*[\r\n]*/, "").
replace(/[\r\n][^\r\n]*\*\/[^\/]+$/, "");
}
function unixTimeSec(){
return Math.round( (new Date()).getTime()/1000);
}

data.js文件如下:

var mSdata = hereDoc(function() {/*!
17,399
1237,399
BLAHBLAH
BLAHBLAH
155,82
194,376
*/});

dynamic unixTime queryString阻止缓存。

AJ在网站http://.工作

小开

如何读取本地文件?< / em >

通过使用这个，你将通过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');
小开

现代的解决方案:

fileOrBlob.text()的用法如下:

<input type="file" onchange="this.files[0].text().then(t => console.log(t))">

当用户通过输入上传一个文本文件时，它将被记录到控制台。下面是一个工作中的jsbin演示。

这里有一个更详细的版本:

<input type="file" onchange="loadFile(this.files[0])">
<script>
async function loadFile(file) {
let text = await file.text();
console.log(text);
}
</script>

目前(2020年1月)这只适用于Chrome和Firefox，如果你将来阅读这篇文章，请检查这里的兼容性:https://developer.mozilla.org/en-US/docs/Web/API/Blob/text

在旧的浏览器上，这应该是有效的:

<input type="file" onchange="loadFile(this.files[0])">
<script>
async function loadFile(file) {
let text = await (new Response(file)).text();
console.log(text);
}
</script>

相关:到2020年9月，新的本地文件系统API在Chrome和Edge中可用，如果你想对用户选择的文件进行永久的读取访问(甚至是写访问)。

小开

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

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

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

我希望这能有所帮助。

小开

如果你想提示用户选择一个文件，那么读取它的内容:

// read the contents of a file input
const readInputFile = (inputElement, callback) => {
const reader = new FileReader();
reader.onload = () => {
callback(reader.result)
};
reader.readAsText(inputElement.files[0]);
};
// create a file input and destroy it after reading it
const openFile = (callback) => {
var el = document.createElement('input');
el.setAttribute('type', 'file');
el.style.display = 'none';
document.body.appendChild(el);
el.onchange = () => {readInputFile(el, (data) => {
callback(data)
document.body.removeChild(el);
})}
el.click();
}

用法:

// prompt the user to select a file and read it
openFile(data => {
console.log(data)
})
小开

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

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)
})
小开

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

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

好吧，这很简单，我们只需调用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()
$output.textContent = text
}


$file.onchange = fetchFile
<input id='file' type='file' accept='text/plain'><br>
<pre id='output'>...</pre>

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

好吧，我年轻的学徒，这也是可能的，我们只需要一个split的文本像这样行

const $output = document.getElementById('output')
const $file = document.getElementById('file')
let count
const fetchFile = async e => {
const [file] = e.target.files
if (!file) return
count = 0
const text = await file.text()
$output.textContent = text


const lines = text.split(/\r?\n/gm)
for (const line of lines) {
if (line) count++
}
console.log({count})
}


$file.onchange = fetchFile
<input id='file' type='file' accept='text/plain'><br>
<pre id='output'>...</pre>


提交答案