html5+js實現，參照xxyy888的CSDN博客文章《使用HTML+javascrpt讀取txt文本文件》失敗，將作者文章中的代碼重新整理了下依然不行，文章代碼存在的問題是括號錯誤，基本上都是弄成了全角字符，整理后的代碼如下，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS操作文本文件</title>
</head>
<body>
<script language="javascript">
var arr = new Array()；
arr[0] = [0, "name0", "value0"];
arr[1] = [1, "name1", "value1"];
arr[2] = [2, "name2", "value2"];
arr[3] = [3, "name3", "value3"];
arr[4] = [4, "name4", "value4"];
function Write2Text(){
var fso = new ActiveXObject("Scripting.FileSystemObject")；
var f = fso.CreateTextFile("a.txt",2,true)；
for(
var i = 0; i < arr.length; i++) {
f.write(arr[i])
f.WriteBlankLines(1)
}
f.Close()；
}
</script>
<input type=button value="Write" onclick="Write2Text()">
<script language="javascript">
function GetHeader(src){
var ForReading = 1;
var fso = new ActiveXObject("Scripting.FileSystemObject")；
var f = fso.OpenTextFile(src,ForReading,true)；
return(f.ReadAll())；
}
function ReadText(){
var arr = GetHeader("C:\\wamp\\www\\rw_txt\\spectest.txt").split("\r\n")；
for(
var i = 0; i < arr.length; i++) {
alert("第" + (i + 1) + "行數據為：" + arr[i])；
}
/* while(!f.AtEndOfStream) {
f.Readline();
}*/
}
</script>
<input type=button value="Read" onclick="ReadText()">
</body>
</html>
效果為
但是如何點擊兩個按鈕都沒反應，查了很多地方也沒高太懂，於是繼續參考另一個博主逆世風靈的博客《HTML5的FileReader API在瀏覽器中一行行的讀取本地文本文件》，作者只是提到了一個html和一個js文件，其實隱含了一個jquery.js文件，通過代碼找到了這么個文件，使用Hbuilder輕松添加至項目目錄。
index.html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>單行讀文本</title>
</head>
<body>
<input type="file" id="file">
<button id="read">Read</button>
<pre id="output"></pre>
<script src="./jquery-1.11.1.js"></script>
<script src="./Reader.js"></script>
<script>
$(function() {
var lr = new LineReader(); //文件塊chunkSize 默認1024B,可以自己設置大小new LineReader({chunkSize: 1})
$('#read').click(function() {
var file = $('#file').get(0).files[0];
var totalCount = 1;
var $output = $('#output');
lr.on('line', function(line, next) {
$output.text($output.text() + '\n' + totalCount + ': ' + line);
totalCount++;
/**
* 模擬某種形式的異步操作
*/
setTimeout(function() {
next();
}, 100);
});
lr.on('error', function(err) {
console.log(err);
});
lr.on('end', function() {
console.log('Read complete!');
});
lr.read(file);
});
});
</script>
</body>
</html>
Reader.js代碼
var LineReader = function(options) {
if(!(this instanceof LineReader)) {
return new LineReader(options);
}
var internals = this._internals = {};
var self = this;
internals.reader = new FileReader();
internals.chunkSize = (options && options.chunkSize) ? options.chunkSize : 1024;
/**
* 讓我們創建一個對象來讓用戶定義的事件回調
*/
internals.events = {};
/**
* 'canRead' 將被設置為false，如果在的FileReader＃中止方法被觸發
*/
internals.canRead = true;
internals.reader.onload = function() {
internals.chunk += this.result;
/**
*如果處理的文本包含一個換行符
*/
if(/\r|\n/.test(internals.chunk)) {
/**
* 拆分文本行的數組
*/
internals.lines = internals.chunk.match(/[^\r\n]+/g);
/**
*如果仍有更多的數據讀取，保存最后一行，因為它可能是不完整的
*/
if(self._hasMoreData()) {
/**
* 如果裝入塊以\n換行符結束，最后一行是完整的，我們並不需要存儲它
*/
internals.chunk = internals.chunk[internals.chunk.length - 1] === '\n' ?
'' :
internals.lines.pop();
}
self._step();
/**
*如果文本不包含換行符
*/
} else {
/**
* 啟動新一輪的讀取過程，如果還有讀取數據
*/
if(self._hasMoreData()) {
return self.read();
}
/**
* 如果沒有數據剩下被讀取，但仍然有存儲在“塊”的數據，發出它作為一行
*/
if(internals.chunk.length) {
return self._emit('line', [
internals.chunk,
self._emit.bind(self, 'end')
]);
}
/**
* 如果沒有存儲在“塊”的數據，發出結束事件
*/
self._emit('end');
}
};
internals.reader.onerror = function() {
/**
* 發出錯誤事件，沿着錯誤對象給回調傳遞“這”指針“的FileReader”實例
*/
self._emit('error', [this.error]);
};
};
/**
*事件綁定
* @eventName- 綁定到事件的名稱
* @ - 當事件觸發執行函數
*/
LineReader.prototype.on = function(eventName, cb) {
this._internals.events[eventName] = cb;
};
LineReader.prototype.read = function(file) {
var internals = this._internals;
/**
* 如果“文件”是定義有效的，那么我們希望得到一些關於它的信息和重置 'readPos', 'chunk', and 'lines'
*/
if(typeof file !== 'undefined') {
internals.file = file;
internals.fileLength = file.size;
internals.readPos = 0;
internals.chunk = '';
internals.lines = [];
}
/**
* 提取該文件的部分用於閱讀開始 'readPos' and 結束於 'readPos + chunkSize'
*/
var blob = internals.file.slice(internals.readPos, internals.readPos + internals.chunkSize);
/**
* 更新當前讀取位置
*/
internals.readPos += internals.chunkSize;
/**
* 閱讀blob 作為 文本
*/
internals.reader.readAsText(blob, "UTF-8");
};
/**
* 停止讀取過程
*/
LineReader.prototype.abort = function() {
this._internals.canRead = false;
};
/**
* LineReader#_step
*
* Internal:獲取下一行並發送它作為一個`line`事件
*/
LineReader.prototype._step = function() {
var internals = this._internals;
/**
* 如果沒有行剩下發送，但仍有數據剩下被讀取，
*再次啟動讀進程，否則發送“結束”事件
*/
if(internals.lines.length === 0) {
if(this._hasMoreData()) {
return this.read();
}
return this._emit('end');
}
/**
* 如果讀數進程尚未終止，發送的第一元素在行數組，並在用戶通過_step“ 准備調用下一行。我們必須綁定“_step'到'this'，
*否則這將是在錯誤的范圍內調用它
*/
if(internals.canRead) {
this._emit('line', [
internals.lines.shift(),
this._step.bind(this)
]);
} else {
/**
*如果我們不能讀，發出“結束”事件
*/
this._emit('end');
}
};
/**
* Internal: 確定是否還有更多的數據讀取。
*/
LineReader.prototype._hasMoreData = function() {
var internals = this._internals;
return internals.readPos <= internals.fileLength;
};
/**
*處理事件的發送
* @ - 發生事件的名稱
* @ - 參數數組來發送到事件回調函數
*/
LineReader.prototype._emit = function(event, args) {
var boundEvents = this._internals.events;
/**
* 如果用戶已經綁定請求事件
*/
if(typeof boundEvents[event] === 'function') {
/**
* Use apply to ensure correct scope, and pass in the 'args' array to
* be used as arguments for the callback 使用apply確保正確的范圍，傳遞'args'數組作參數用於為回調
*/
boundEvents[event].apply(this, args);
}
};
jquery-1.11.1.js的代碼
一萬多行，，，
迷你版本的看看
。。。也三千多行，算了這里不張貼了，網上一搜一大堆
最后的效果為
做完之后，想到其實自己希望實現將讀取的文件存儲成數組之類，查詢了下，php在這方面比較強，可以參考文章《PHP讀取文件內容代碼》，不過那時另外的文章了，以后有空再說嘍