在HTML 5以前，HTML的文件上传域的功能具有很大的局限性，这种局限性主要体现为如下两点。
➢ 每次只能选择一个文件进行上传。
➢ 客户端代码只能获取被上传文件的文件路径，无法访问实际的文件内容。
HTML 5规范改变了这种现状，HTML 5允许同时选择多文件上传，而且HTML 5允许客户端JavaScript访问实际的文件内容。
FileList对象与File对象
HTML 5为type="file"的<input.../>元素增加了如下两个属性。
➢ accept：该属性控制允许上传的文件类型。该属性值为一个或多个MIME类型字符串。多个MIME类型字符串之间应以逗号分隔。
➢ multiple：该属性设置是否允许选择多个文件。从上面介绍可以看出，只要为type="file"的<input.../>元素增加multiple属性，即可让该文件上传域允许同时选择多个文件。
JavaScript可以通过files属性访问type="file"的<input.../>元素生成的文件上传域内的所有文件，该属性返回一个FileList对象，FileList对象相当于一个数组，开发者可以使用类似于数组的方法来访问该数组内的每个File对象。
File对象是一个JavaScript对象，JavaScript可以通过该对象获取用户浏览的所有文件的信息。File对象包含如下常用属性。
➢ name：返回该File对象对应的文件的文件名，不包括文件路径部分。
➢ type：返回该File对象对应的文件的MIME类型字符串。
➢ size：返回该File对象对应的文件的大小。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 文件上传域 </title>
</head>
<body>
浏览图片：<input id="images" type="file" multiple
accept="image/*"/>
<input type="button" value="显示文件" onclick="showDetails();"/>
<script type="text/javascript">
var showDetails = function()
{
var imageEle = document.getElementById("images");
// 获取文件上传域内输入的多个文件
var fileList = imageEle.files;
// 遍历每个文件
for(var i = 0 ; i < fileList.length ; i ++)
{
var file = fileList[i];
div = document.createElement("div");
// 依次读取每个文件的文件名、文件类型、文件大小
div.innerHTML = "第" + (i + 1) + "个文件的文件名是：" + file.name
+ "，该文件类型是：" + file.type
+ "，该文件大小为：" + file.size;
// 把div元素添加到页面中。
document.body.appendChild(div);
}
}
</script>
</body>
</html>
使用FileReader读取文件内容
FileReader同样是一个JavaScript对象，开发者可以通过该对象在客户端读取文件上传域所选择的文件内容。
FileReader提供了如下方法。
➢ readAsText(file, encoding)：以文本文件的方式来读取该文件，其中encoding参数指定读取该文件时所用的字符集，该参数的默认值是UTF-8。
➢ readAsBinaryString(file)：以二进制方式来读取该文件。通过这种方式可以读取文件内容的二进制数据，这样就可以通过Ajax把数据上传到服务器。
➢ readAsDataURL(file)：以DataURL方式来读取文件。这种方式也可用于读取二进制文件，只是这种方式将会采用base64方式把文件内容编码成DataURL格式的字符串。
实际上DataURL也是一种保存二进制文件的方式，在一些特殊的场景下（比如一些不支持二进制流的网络环境下），也会考虑把二进制文件转换为DataURL格式的字符串，然后把这个字符串通过网络进行传输。需要的时候，我们也可以把DataURL格式的字符串恢复成原来的文件。
➢ abort()：停止读取。
需要指出的是，FileReader的所有readXxx()方法都是异步方法，这些方法都不会直接返回读取的文件内容，程序必须以事件监听的方式来获取读取的结果。FileReader提供了如下事件来监听读取过程。
➢ onloadstart：FileReader开始读取数据时触发该事件指定的函数。
➢ onprogress：FileReader正在读取数据时触发该事件指定的函数。
➢ onload：FileReader成功读取数据后触发该属性事件的函数。
➢ onloadend：FileReader读取数据完成后触发该事件指定的函数，无论读取成功还是读取失败都将触发该事件指定的函数。
➢ onerror：FileReader读取失败时触发该事件指定的函数。
为了获取成功读取文件后的文件内容，可以通过为onload属性绑定事件监听器来实现。在onload属性指定的事件监听函数中，程序代码可通过FileReader的result属性访问读取文件的结果。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 文件上传域 </title>
</head>
<body>
浏览文件：<input id="file1" type="file"/><br/>
<div id="result"></div>
<input type="button" value="读取文本文件" onclick="readText();"/><br/>
<input type="button" value="读取二进制文件" onclick="readBinary();"/><br/>
<input type="button" value="以DataURL方式读取" onclick="readURL();"/><br/>
<script type="text/javascript">
var reader = null;
// 如果浏览器支持FileReader对象
if(FileReader)
{
reader = new FileReader();
}
// 如果浏览器不支持FileReader对象，弹出提示信息
else
{
alert("浏览器暂不支持FileReader");
}
var readText = function()
{
// 通过正则表达式验证该文件是否为文本文件，
// 如果用户选择的第一个文件是文本文件
if(/text\/\w+/.test(document.getElementById("file1").files[0].type))
{
// 以文本文件的方式读取用户选择的第一个文件
reader.readAsText(document.getElementById("file1").files[0] , "gbk");
// 当reader读取数据完成时将会激发该函数
reader.onload = function()
{
document.getElementById("result").innerHTML = reader.result;
};
}
else
{
alert("你选择的文件不是文本文件！");
}
}
var readBinary = function()
{
// 以二进制流的方式读取用户选择的第一个文件
reader.readAsBinaryString(document.getElementById("file1").files[0]);
// 当reader读取数据完成时将会激发该函数
reader.onload = function()
{
document.getElementById("result").innerHTML = reader.result;
};
}
var readURL = function()
{
// 以DataURL的方式读取用户选择的第一个文件
reader.readAsDataURL(document.getElementById("file1").files[0]);
// 当reader读取数据完成时将会激发该函数
reader.onload = function()
{
document.getElementById("result").innerHTML = reader.result;
};
}
</script>
</body>
</html>
监控文件的读取进度
FileReader在读取文件的过程中可能多次触发onprogress事件，通过该事件绑定监听器即可实时监控文件的读取进度。例如，下面页面代码使用了<progress.../>元素来显示文件的读取进度。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 文件上传域 </title>
</head>
<body>
浏览文件：<input id="file1" type="file"/><br/>
上传进度：<progress id="pro" value="0"></progress>
<div id="result"></div>
<input type="button" value="读取二进制文件" onclick="readBinary();"/><br/>
<script type="text/javascript">
var reader = null;
// 如果浏览器支持FileReader对象
if(FileReader)
{
reader = new FileReader();
}
// 如果浏览器不支持FileReader对象，弹出提示信息
else
{
alert("浏览器暂不支持FileReader");
}
var readBinary = function()
{
// 以二进制流的方式读取用户选择的第一个文件
reader.readAsBinaryString(document.getElementById("file1").files[0]);
var pro = document.getElementById("pro");
pro.max = document.getElementById("file1").files[0].size;
// 当reader读取数据的过程中会不断激发该函数。
reader.onprogress = function(evt)
{
pro.value = evt.loaded;
};
}
</script>
</body>
</html>
提示
FileReader只是客户端的JavaScript对象，使用FileReader所进行的上传也只是把磁盘上的文件读到浏览器内存中，并未真正上传到服务器。如果需要真正把客户端文件上传到远程服务器，则可把文件数据以POST请求方式提交到远程服务器，远程服务器负责接收并解析文件数据，并把数据内容保存到服务器。
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。