web前端读取文本文件内容
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读取文件内容代码》，不过那时另外的文章了，以后有空再说喽
web前端读取文本文件内容的更多相关文章
- java读取文本文件内容2
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/183 很久之前写了一篇Java读取文本文件内容,链接地址是 ...
- java读取文本文件内容
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/128 java读取文本文件内容 今天写代码写着要调试一个很 ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- [转] Web前端优化之 内容篇
原文网址: http://lunax.info/archives/3090.html Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献. ...
- php -- 读取文本文件内容
php读取文件内容的三种方法: //**************第一种读取方式***************************** 代码如下: header("content- ...
- web前端优化之内容优化
前端内容优化主要有以下几条: 1.尽量减少http请求 (1)合并文件,把多个css文件合并在一起: (2)css Sprites,把css相关的background元素进行背景图绝对定位: (3)图 ...
- 自动判断文本文件编码来读取文本文件内容(.net版本和java版本)
.net版本 using System; using System.IO; using System.Text; namespace G2.Common { /// <summary> / ...
- C++ 读取文本文件内容到结构体数组中并排序
成绩排行:从Score.txt文件读取学生信息,对其进行排序,按回答题数从大到小排,若相等,按分数从小到大排 #include<iostream> #include<fstream& ...
- js前端读取文件内容
方法1:原生 <input type="file" name="file" id="file" onchange="jsRe ...
随机推荐
- [Leetcode] candy 糖果
There are N children standing in a line. Each child is assigned a rating value. You are giving candi ...
- 洛谷 P2444 [POI2000]病毒 解题报告
P2444 [POI2000]病毒 题目描述 二进制病毒审查委员会最近发现了如下的规律:某些确定的二进制串是病毒的代码.如果某段代码中不存在任何一段病毒代码,那么我们就称这段代码是安全的.现在委员会已 ...
- Codeforces ----- Kefa and Dishes [状压dp]
题目传送门:580D 题目大意:给你n道菜以及每道菜一个权值,k个条件,即第y道菜在第x道后马上吃有z的附加值,求从中取m道菜的最大权值 看到这道题,我们会想到去枚举,但是很显然这是会超时的,再一看数 ...
- Codeforces Round #532 (Div. 2) 题解
Codeforces Round #532 (Div. 2) 题目总链接:https://codeforces.com/contest/1100 A. Roman and Browser 题意: 给出 ...
- 状压DP初识~~炮兵阵地
炮兵阵地 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 31718 Accepted: 12253 Descriptio ...
- HTML5 视频直播
目前视频直播,尤其是移动端的视频直播已经火到不行了,基本上各大互联网公司都有了自己的直播产品,所以对于直播的一些基本知识和主要技术点也要有所了解,本次分享就向大家介绍一下其中的奥秘. 内容大体框架: ...
- 7月24号day16总结
一开始显示出现问题,js路径不能应用,因为用的是springMVC框架书写,所以有路径的保护和静态引用地址时需要注意的地方 今天进行了最后项目的优化,包括map清洗数据部分的代码和echarts显示的 ...
- windows 系统下git 的使用
前言: 最新版本的git for windows也是有界面的,不再是以前的纯命令行操作,但是我习惯了乌龟,所以感觉还是直接用乌龟比较方便点~~ 前提,已安装以下: git for windows,未安 ...
- COGS2085 Asm.Def的一秒
时间限制:1 s 内存限制:256 MB [题目描述] “你们搞的这个导弹啊,excited!” Asm.Def通过数据链发送了算出的疑似目标位置,几分钟后,成群结队的巡航导弹从“无蛤”号头顶掠过 ...
- [BZOJ2453]维护队列|分块
Description 你小时候玩过弹珠吗? 小朋友A有一些弹珠,A喜欢把它们排成队列,从左到右编号为1到N.为了整个队列鲜艳美观,小朋友想知道某一段连续弹珠中,不同颜色的弹珠有多少.当然,A有时候会 ...