读取文本文件
HTML5搭配JavaScript就可以轻松读取文件的内容,并显示文件属性(例如大小、文件类型、创建日期)经常读取的文件是文本文件,下面将以读取文本文件来说明读取文件的方法。
选择文件
选择文件最简单的方式就是使用Input元素,只要将input元素的type属性指定为file,就能够轻轻松松地选择文件。语法如下:
<input type ="file" name = "file_name">
Input的file组件有两个属性可供设置:一个是accept,另一个是multiple
- accept属性:指定文件类型,也就是file字段可接受的附件,常用语法如下:
语法 | 说明 |
accept="video/*" | 只能选择影片文件 |
accept="audio/*" | 只能选择音频文件 |
accept="text/*" | 只能选择文本文件 |
accept="application/pdf" | 只能选择 |
如果支持多种文件类型,也可以用逗号隔开,例如accept="audio/*,video/*,image/*"。
- multiple属性:可以让用户在文件的对话框中选择一个以上的文件
Input的file组件绑定change事件,并设置匿名函数接收返回的File对象。当一次选择多个对象时返回的就是一个Filelist对象,结构上类似于数组,可以使用length属性获取文件个数,也可以用item[n]方法获得表中的第n个文件,语法如下所示
$("input:file").on("change",function(event){
for(var i =0;i<event.target.files.length;i++){
var file =event.target.files[i];
...
}
})
File对象可以通过size、type、name来取得文件信息。
- name:取得文件名称
- size:取得文件大小(bytes)
- type:取得文件类型,当遇到无法识别的文件类型时会返回空白
下面时一个点击“选择文件”按钮后,显示文件名的范例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#outline {border:5px#666000 outset;padding: 10px;}
</style>
<script src="../jquery-3.3.1.min.js"></script>
<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];
$('#message').append(file.name+"<br>");
}
})
})
</script>
</head>
<body>
<div id="outline">
<h1>选择文件</h1>
<input type="file" accept="image/*" multiple/> <!--multiple可以一次选择多个文件-->
<div id="message"></div>
</div>
</body>
</html>
执行结果如下:
读取文件
File对象只能取得文件信息,并不能读取文件内容,想要读取文件内容,就必须使用FileReader,创建FileReader对象的语法如下:
var r = new FileReader();
事件 | 说明 |
FileReader.onabort | 使用abort()中断读取操作时触发 |
FileReader.onerror | 读取操作失败时触发 |
FileReader.onload | 读取操作成功时触发 |
FileReader.onloadstart | 读取操作开始时触发 |
FileReader.onloadend | 读取操作结束时触发 |
FileReader.onprogress | 读取内容时触发 |
读取文件时,有以下3种属性可供使用
- FileReader.error:返回错误代码
- FileReader.readyState:返回文件读取状态(0:FileReader对象刚创建尚未读入数据)、(1:数据正确读入)、(2:读取操作结束,此使才会返回成功、失败或终止)
- FileReader.result:根据文件读取方式返回处理结果,读取方法有以下4种(readAsText:以文字方式读取内容,默认的编码是utf-8)、(readAsDataURL:将读取内容,以Data URL编码)、(readAsArrayBuffer:以ArrayBuffer数据类型的二进制格式读取)、(readAsBinaryString:以二进制格式读取)
程序结构如下:
$("input:file").on('change',function(event){
var file = event.target.files[0];//获取file对象
if(file){
var r = new FileReader(); //创建FileReader对象
r.onload = function(e){
var contents = e.target.result;//获取文件内容
...
}
r.readAsDataURL(file); //指定文件读取方式
}else{
alert("选择文件失败");
}
});
请看下面的范例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.3.1.min.js"></script>
<style>
#outline {border:5px #666000 outset;
padding: 0px;}
</style>
<script type="text/javascript">
$(function () {
$("input:file").on('change',function (event) {
$('#fileContentList').empty();
for (var i =0;i<event.target.files.length;i++){
var file = event.target.files[i];
if(file){
var r = new FileReader();
r.file = file;
r.readAsDataURL(file);
r.onload = function (e) {
var contents = e.target.result;
var thisfile = this.file;
$('#fileContentList').append("文件名:"+thisfile.name+"<br>文件类型:"+
thisfile.type+"<br>文件大小:"+thisfile.size+"bytes<br><img src='"+contents+"'><br>");
}
}else
{
alert("选择文件失败");
}
}
})
})
</script>
</head>
<body>
<div id ="outline">
<h1>选择文件</h1>
<input type="file" multiple="multiple" accept="image/*"/>
<div id="fileContentList"></div>
</div>
</body>
</html>
执行结果如下: