html读取文本文件
来源:互联网 发布:40x10÷1.25的简便算法 编辑:程序博客网 时间:2024/06/07 05:55
读取文本文件:
选择文件:
<input type="file" name="file_name"/>
file组件的属性:
accept(能接受的附件):
accept="video/*" ---只能选择影音文件
accept="audio/*" ---只能选择音频文件
accept="text/*" ---只能选择文本文件
accept="application/pdf" ---只能选择pdf文件
用 ,隔开可以支持多种文件形式
multiple属性:可以选择多个文件
file组件绑定change事件:
$("input:file").on("change",function(event){
for(var i=0;i<event.target.files.length;i++)
{
var=file=event.target.files[i];
file.name ---获取文件名字
file.size ---获取文件大小
file.type ---获取文件样式
}
})
多选对象返回一个filelist对象,类似数组,可以使用length获取文件个数
读取文件:
1.filereader用于读取文件
fileReader.error:返回错误代码
fileReader.readyState 返回文件的读取状态:
0 --FileReader对象刚创建,未读入数据
1 --数据正确读入
2 --读取操作结束
调用FileReader对象的方法
fileReader.result,FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能,需要注意的是 ,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在 result属性中。
方法名 参数 描述
abort none 中断读取
readAsBinaryString file将文件读取为二进制码
readAsDataURL file将文件读取为 DataURL
readAsText file, [encoding]将文件读取为文本
readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
2.处理事件
FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态,下面这个表格归纳了这些事件。
事件 描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中
文件一旦开始读取,无论成功或失败,实例的 result 属性都会被填充。如果读取失败,则 result 的值为 null ,否则即是读取的结果,绝大多数的程序都会在成功读取文件的时候,抓取这个值。
创建FileReader对象:
var r=new FileReader();
获取文件内容:
var contents=e.target.result;
r.readAsDataURL(file); ---指定文件的读取方式
<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>zyy</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><style type="text/css">#content{ text-align:center;}</style><script type="text/javascript">$(function(){ $("input:file").on("change",function(event){ for(var i=0;i<event.target.files.length;i++) { var file=event.target.files[i]; $("#content_b").append(file.name+"<br/>"); $("#content_b").append(file.size+"<br/>"); $("#content_b").append(file.type+"<br/>"); } if(file) { var r=new FileReader(); r.onload=function(e){ var contents=e.target.result; $("#content_a").append(contents); }; r.readAsText(file); }});})</script></head><body><div data-role="header"> <h1>文件处理</h1> <input type="file" name="file_name" multiple/> </div> <div data-role="content" id="content"> <span id="content_a"></span> </div> <div data-role="footer" id="footer"> <h1>文件信息</h1> <a id="content_b"></a> </div></body></html>
阅读全文
0 0
- HTML 读取文本文件
- html读取文本文件
- 使用HTML+javascrpt读取txt文本文件
- 保存文本文件, 读取文本文件
- 读取文本文件
- 读取文本文件
- 读取文本文件
- 读取文本文件
- 文本文件读取
- 使用Delphi读取网络上的文本文件,html文件
- 逐行读取文本文件
- C#读取中文文本文件
- 如何读取、修改文本文件
- 如何读取、修改文本文件
- C#读取文本文件
- asp读取文本文件
- Flash读取外部文本文件
- vc读取文本文件
- 51Nod 1007 正整数分组
- Taste of programmer——GAD
- 密码加盐&安全的账号系统
- 兔子跳跃之谜
- ES6 箭头函数中的 this?(临时性保存)
- html读取文本文件
- eclipse中服务器编译javaWeb项目
- 动态UI心得一(CSharp)
- arcgis api for js本地部署
- 第七届蓝桥杯国赛 凑平方数
- Kotlin for Android
- 项目管理能力提升四要素
- 仿天猫网站开发6:用户购物流程梳理
- 最大似然估计(Maximum Likelihood Estimate)