读取文本文件
HTML5搭配JavaScript就可以轻松读取文件的内容，并显示文件属性（例如大小、文件类型、创建日期）经常读取的文件是文本文件，下面将以读取文本文件来说明读取文件的方法。
选择文件
选择文件最简单的方式就是使用Input元素，只要将input元素的type属性指定为file，就能够轻轻松松地选择文件。语法如下：
<input type ="file" name = "file_name">Input的file组件有两个属性可供设置：一个是accept，另一个是multiple
- accept属性：指定文件类型，也就是file字段可接受的附件，常用语法如下：
accept属性
语法 | 说明 |
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>执行结果如下：
