JS讀取txt文件

一、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()方法寫入文件即可。

原創文章,作者:XJPJ,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/138197.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
XJPJ的頭像XJPJ
上一篇 2024-10-04 00:19
下一篇 2024-10-04 00:19

相關推薦

發表回復

登錄後才能評論