在HTML5以前，HTML的文件上传域的功能具有很大的局限性，这种局限性主要体现在如下两点：
- 每次只能选择一个文件进行上传
- 客户端代码只能获取被上传文件的文件路径，无法访问实际的文件内容
一、FileList对象和File对象
HTML5为type=‘file‘ 的<input/>元素增加了两个属性。
- accept:该属性控制允许上传的文件类型。该属性为一个或多个MIME类型字符串。多个MIME类型字符串之间应以都好分割。
- multiple：该属性设置是否允许选择多个文件
JavaScript可以通过files属性访问type=‘file‘的<input/>元素生成的文件上传域的所有文件，该属性返回一个FileList对象，FileList对象相当于一个数组，开发者可以使用类似于数组的方法来访问该数组内的每个File对象。
File对象是一个JavaScript对象，可以通过该对象获取浏览器的所有文件信息。File对象包含如下属性。
- name:返回该File对象对应的文件的文件名， 不包括文件路径部分
- type：返回该File对象的文件的MIME类型字符串。
- size：返回该File对象的对应的文件的大小，字节单位
实例：
预览图片：
<input id="images" type="file" multiple accept="image/*" />
<script type="text/javascript">
var imgInput = document.getElementById(‘images‘);
imgInput.onchange = function () {
//1.获取所有选中文件列表
var fileList = imgInput.files;
//2.遍历显示信息
for (var i = 0; i < fileList.length; i++) {
var file = fileList[i];
//一次读取文件的文件名，文件类型，文件大小
var div = document.createElement(‘div‘);
div.innerHTML = "第" + (i + 1) + "个文件的文件名：" +
file.name
+ ",文件类型：" + file.type
+ "，文件大小：" + file.size;
//添加到 body中
document.body.appendChild(div);
}
}
</script>
显示结果：
提示：该文件选择框设置了accept=‘image/*‘只显示图片。
不要靠accept属性来过滤文件类型，因为这只是客户端的文件类型过滤，这种文件类型过滤是很脆弱的，如果开发者需要进行文件上传，则必须在服务器端对文件类型进行过滤。
二、使用FileReader读取文件内容
FileReader同样是一个JavaScript对象，开发者可以通过该对象在客户端读取 文件上传域所选择的文件内容。
读取文件进内存文件不应太大。
FileReader提供了如下方法。
- readAsText(file,encoding)：以文本文件方式读取文件，其中恩从定参数指定读取文件是所用的字符集，该参数的默认值是UTF-8
- readAsBinaryString(file)：以二进制方式来读取该文件。通过这种方式可以读取文件内容的二进制数据，这样就通过Ajax把数据上传到服务器。
- readAsDataURL(file)：以DataURL方式读取文件。 这种 方式也可以用于读取二级制文件，这种方式将来会采用base64
- readAsArrayBuffer
方式把文件编码成DataURL格式的字符串。
提示：实际上DataURL也是一种保存二进制文件的方式，在一些特殊的场景下（比如一些不支持二进制网络的环境下），会考虑把二进制文件转换成DataURL格式的字符串，然后把这个字符串通过网络进行传输。需要的时候，我们 也可以把DataURL格式的字符串恢复成原来的文件。
- abort()：停止读取
需要指出的是，FileReader的所有readXxx()方法都是异步方法，这些方法都不会直接返回读取的文件内容，程序必须以事件监听的方式来获取监听的方式来获取读取的结果。FileReader提供了如下事件来监听读取过程。
- onloadstart：FileReader开始读取数据时 该事件的指定函数
- onprogress：FileReader正在读取数据时触发该事件的指定函数。
- onload：FileReader成功读取数据后触发改事件的函数。
- onerror：FileReader读取失败时出发该事件的指定函数。
- onloadend：FileReader读取数据完成后触发该事件指定的函数，无论读取成功还是读取失败都将触发该事件的指定函数。
实例1：
<div>
读取文本文件：
<input type="file" id="file1" />
</div>
<div>
读取为二进制：
<input type="file" id="file2" />
</div>
<div>
读取为DataURL：
<input type="file" id="file3" accept="*"/>
</div>
<p id="result" style="width:100%;word-break:break-all;word-wrap:break-word;"></p>
<script type="text/javascript">
//判断浏览器是否支持FileReader对象
var reader
if (FileReader) {
reader = new FileReader();
} else {
alert(‘您的浏览器不支持FileReader对象‘);
}
//1.读取为文本
var file1 = document.getElementById(‘file1‘);
file1.onchange = function () {
var file = file1.files[0];
//判断读取的第一个文件是否是文本文件
if (/text\/\w+/.test(file.type)) {
//以文本的方式读取内容
reader.readAsText(file, ‘gbk‘);
reader.onload = function () {
document.getElementById(‘result‘).innerHTML = reader.result;
}
} else {
alert(‘读取的不是文本文件‘);
}
}
//2.读取为二级制
var file2 = document.getElementById(‘file2‘);
file2.onchange = function () {
var file = file2.files[0];
//以二进制流的方式读取第一个文件
//reader.readAsArrayBuffer(file); //返回二进制数组
reader.readAsBinaryString(file); //返回二进制字符串
reader.onload = function () {
document.getElementById(‘result‘).innerHTML = reader.result;
}
}
//3.读取为DataURL
var file3 = document.getElementById(‘file3‘);
file3.onchange = function () {
var file = file3.files[0];
reader.readAsDataURL(file);
reader.onload = function () {
document.getElementById(‘result‘).innerHTML = reader.result;
}
}
</script>
FileReader在读取文件的过程中可能多次触发onprogress事件，通过该事件绑定监听器即可实时监控文件的读取进度。
提示：FileReader只是客户端的JavaScript对象，使用FileReader所进行的上传也只是把磁盘上的文件读取到浏览器内存中，并未真正上传到服务器。如果需要真正把客户端文件上传到服务器，则可把文件数据以POST请求方式提交到远程服务器，远程服务器负责接收文件数据，并把数据内容保存到服务器。
实例2：
<div>
读取二进制文件：
<input type="file" id="file1" accept="*" />
</div>
<div>
显示进度：
<progress id="pro" value="0"></progress>
</div>
<div id="result"></div>
<script type="text/javascript">
var file1 = document.getElementById(‘file1‘);
file1.onchange = function () {
var file = file1.files[0];
//读取为二进制
var reader = new FileReader();
reader.readAsBinaryString(file);
//显示进度
var pro = document.getElementById(‘pro‘);
pro.max = file.size;
pro.value = 0;
reader.onprogress = function (e) {
pro.value = e.loaded;
}
reader.onload = function () {
document.getElementById(‘result‘).innerHTML = reader.result;
}
}
</script>