web前端读取文本文件内容 |
您所在的位置：网站首页 › 前端解析txt文件 › web前端读取文本文件内容 |
web前端读取文本文件内容
|
html5+js实现，参照xxyy888的CSDN博客文章《使用HTML+javascrpt读取txt文本文件》失败，将作者文章中的代码重新整理了下依然不行，文章代码存在的问题是括号错误，基本上都是弄成了全角字符，整理后的代码如下， JS操作文本文件 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()； } 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(); }*/ }
效果为
但是如何点击两个按钮都没反应，查了很多地方也没高太懂，于是继续参考另一个博主逆世风灵的博客《HTML5的FileReader API在浏览器中一行行的读取本地文本文件》，作者只是提到了一个html和一个js文件，其实隐含了一个jquery.js文件，通过代码找到了这么个文件，使用Hbuilder轻松添加至项目目录。 index.html代码 单行读文本 Read $(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); }); });
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 |
【本文地址】
今日新闻 |
推荐新闻 |