程式設計小知識之 JavaScript 檔案讀取

程式設計小知識之 JavaScript 檔案讀取

本文介紹了兩種在 JavaScript 讀取檔案的方法

檔案讀取在當今的程式設計語言中應該算是一項比較 trivial 的工作了,語言的标準庫一般都會幫助我們做好檔案抽象與讀寫緩存,我們僅需要熟悉和運用相關的 API 即可.

但是 JavaScript 由于安全性的原因,一直以來都沒有提供相關的檔案讀取接口,但有時我們确實需要讀取本地檔案内容,下面是兩種可能的讀取方法.

1. 使用 HTML5 中的 FileReader

   HTML5 引入的 FileReader 可以幫助我們讀取本地檔案,但是有一個限制,就是我們不能直接使用檔案路徑的方式來通路檔案,而是首先需要使用者選擇檔案(通過檔案選擇或者拖動檔案至網頁等方式)

代碼還是比較簡單的,首先你需要在 html 檔案中添加檔案選擇表單:

接着就可以在 JavaScript 中進行(使用者選擇的)檔案讀取了:

function readSingleFile(e) {

// file from "file-input"
var file = e.target.files[0];
if (!file) {
  return;
}

// create FileReader
var reader = new FileReader();

// load callback
reader.onload = function(e) {
  var contents = e.target.result;

  // process file contents here
  // ...

};

// do read
reader.readAsText(file);           

}

// add file input change listener

var fileInput = document.getElementById("file-input");

fileInput.addEventListener("change", readSingleFile, false);

1. 使用 XMLHttpRequest

   XMLHttpRequest 一般用于實作 Ajax,通過他我們也可以實作本地檔案的讀取(但是有同源等限制),示例代碼如下:

var contents = "";

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {

if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
    contents = xmlhttp.responseText;
    
    // process file contents here
    // ...
  
}           

};

// send read request

xmlhttp.open("GET","abc.txt",true);

xmlhttp.send();

更多資料

http://researchhubs.com/post/computing/javascript/open-a-local-file-with-javascript.html https://www.html5rocks.com/en/tutorials/file/dndfiles/

https://www.liaoxuefeng.com/wiki/1022910821149312/1023022332902400

作者：tkokof1

來源：CSDN

原文：

https://blog.csdn.net/tkokof1/article/details/91050003

版權聲明：本文為部落客原創文章，轉載請附上博文連結！