JS读取txt文件

发布时间：2023-05-17

一、js读取文件

在JS中，使用File对象读取文件。File对象只能读取上传的文件，不能访问本地文件系统中的文件。使用FileReader对象和File接口可以读取本地文件系统中的文件。

function readFile(file) {
  var reader = new FileReader();
  reader.onload = function(event) {
    console.log(event.target.result);
  };
  reader.readAsText(file);
}

使用上面的函数，调用FileReader对象的readAsText()方法读取文件。readAsText()方法可以接受Blob对象和File对象。Blob对象就是二进制数据，可以通过一个URL从远程服务器获取。File对象是Blob的子类，带有文件名、修改时间、大小等信息，它是从页面中的file input元素选择的文件。

二、js读取文件内容

读取文件内容需要调用FileReader对象的readAsText()方法。readAsText()方法的第一个参数可以是Blob或File对象，第二个参数是编码方式，默认为UTF-8。

var file = new File(["Hello, world!"],"hello.txt");
var reader = new FileReader();
reader.onload = function(event) {
  console.log(event.target.result);
};
reader.readAsText(file);

以上代码创建了一个File对象，包含了文本"Hello, world!"，文件名为"hello.txt"。然后通过FileReader对象读取文件内容。输出结果将是"Hello, world!"。

三、js读取txt文本

在js中读取txt文本可以使用FileReader对象的readAsText()方法，它可以将文件的内容读取为字符串。以下是读取txt文件的示例代码：

document.getElementById('file').addEventListener('change', function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    console.log(reader.result);
  };
  reader.readAsText(file);
});

上述代码中，我们通过选择文件表单元素的change事件来获取用户选择的文件，然后使用FileReader对象来读取文件。最后，我们可以获得文件内容并输出到控制台。

四、js读取doc文件

JS不能直接读取.doc文件，但可以借助第三方库来实现。Apache POI是用于处理MS Office文档的Java库，我们可以使用Rhino或Graal.js来在JS中直接使用它。以下是Rhino的示例代码：

var FileReader = Java.type('java.io.FileReader');
var HWPFDocument = Java.type('org.apache.poi.hwpf.HWPFDocument');
var doc = new HWPFDocument(new FileReader('example.doc'));
console.log(doc.text());

以上代码中，我们使用了Java的FileReader和Apache POI库来读取example.doc文件并提取文本内容。

五、js获取txt文件内容

使用XMLHttpRequest对象获取txt文件内容是一种常见的方法。以下是使用XMLHttpRequest对象获取txt文件内容的示例代码：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.open('GET', 'example.txt', true);
xhr.send();

以上代码使用XMLHttpRequest对象进行异步GET请求，请求example.txt文件，并在接收到数据时输出文件内容。

六、js读取json文件

js读取json文件与读取txt文件类似，也可以使用XMLHttpRequest对象，只需要将responseText解析为JSON对象即可。以下是读取json文件的示例代码：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
}
xhr.open('GET', 'data.json', true);
xhr.send();

以上代码使用XMLHttpRequest对象进行异步GET请求，请求data.json文件，然后将responseText解析为JSON对象。最后输出数据到控制台。

七、js读取本地txt文件内容

直接从JavaScript访问本地文件系统是不安全的，这是因为JavaScript是运行在浏览器中的沙箱中，没有访问本地文件系统的权限。但是，我们可以使用HTML5的File API来读取本地文件。以下是读取本地txt文件内容的示例代码：

function readLocalFile(file) {
  var reader = new FileReader();
  reader.onload = function(event) {
    console.log(event.target.result);
  };
  reader.readAsText(file);
}
var input = document.createElement('input');
input.type = 'file';
input.addEventListener('change', function(event) {
  var file = event.target.files[0];
  readLocalFile(file);
});
document.body.appendChild(input);

以上代码中，我们创建一个file input元素，当用户选择文件时，我们将文件传递给我们的readLocalFile()函数。这个函数使用FileReader对象读取文件，最后将文件内容输出到控制台。

八、js创建txt文件并写入

使用FileSystem API可以在浏览器中创建和操作文件。下面是创建txt文件并写入的示例代码：

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
navigator.webkitPersistentStorage.requestQuota(1024*1024*1024, function(grantedBytes) {
  window.requestFileSystem(window.PERSISTENT, grantedBytes, function(fs) {
    fs.root.getFile('example.txt', {create: true}, function(fileEntry) {
      fileEntry.createWriter(function(fileWriter) {
        fileWriter.onwriteend = function() {
          console.log('Write completed.');
        };
        var blob = new Blob(['Hello, world!'], {type: 'text/plain'});
        fileWriter.write(blob);
      }, errorHandler);
    }, errorHandler);
  }, errorHandler);
}, errorHandler);
function errorHandler(e) {
  console.error(e);
}

以上代码中，我们请求用户授权通过navigator.webkitPersistentStorage.requestQuota()方法。然后通过window.requestFileSystem()方法请求文件系统，使用fs.root.getFile()方法创建或打开example.txt文件。接着，我们调用createWriter()方法创建一个FileWriter对象，最后使用write()方法写入文件即可。

推荐文章