2019-6-3 seo達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
本文介紹了兩種在 JavaScript 讀取文件的方法
文件讀取在當(dāng)今的編程語(yǔ)言中應(yīng)該算是一項(xiàng)比較 trivial 的工作了,語(yǔ)言的標(biāo)準(zhǔn)庫(kù)一般都會(huì)幫助我們做好文件抽象與讀寫(xiě)緩存,我們僅需要熟悉和運(yùn)用相關(guān)的 API 即可.
但是 JavaScript 由于安全性的原因,一直以來(lái)都沒(méi)有提供相關(guān)的文件讀取接口,但有時(shí)我們確實(shí)需要讀取本地文件內(nèi)容,下面是兩種可能的讀取方法.
1. 使用 HTML5 中的 FileReader
HTML5 引入的 FileReader 可以幫助我們讀取本地文件,但是有一個(gè)限制,就是我們不能直接使用文件路徑的方式來(lái)訪問(wèn)文件,而是首先需要用戶選擇文件(通過(guò)文件選擇或者拖動(dòng)文件至網(wǎng)頁(yè)等方式)
代碼還是比較簡(jiǎn)單的,首先你需要在 html 文件中添加文件選擇表單:
<input type="file" id="file-input" />
<div id="file-content" />
1
2
接著就可以在 JavaScript 中進(jìn)行(用戶選擇的)文件讀取了:
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);
2. 使用 XMLHttpRequest
XMLHttpRequest 一般用于實(shí)現(xiàn) Ajax,通過(guò)他我們也可以實(shí)現(xiàn)本地文件的讀取(但是有同源等限制),示例代碼如下:
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
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.shtzxx.cn