HTML5 File API
1.File API
一直以来，不能直接访问用户计算机中的文件都是web应用开发当中的一大障碍。File API的宗旨是为web开发人员提供一种安全的方式，以便在客户端访问用户计算机中的文件，并更好的对这些文件进行操作。
HTML5在DOM中为文件输入元素添加了一个files的集合，在通过文件输入字段选择了一个或多个文件时，files集合中将包含一组File对象 ，每个File对象对应着一个文件，每个File对象都有下列只读对象。
name：本地文件系统中的文件名。
size：文件的字节大小
type： 字符串，文件的MIME类型
lastModifiedDate： 文件上一次被修改时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var filesList = document.getElementById("fileList");
filesList.addEventListener('change', function(event) {
var files = event.target.files,
i=0,
len = files.length;
while(i<len){
alert(files[i].name);
i++;
}
});
};
</script>
</head>
<body>
<input type="file" name="fileList" id="fileList" value="" />
</body>
</html>
不过file API的功能不仅仅如此，通过他提供的FIleReader类型甚至还可以读取文件中的数据
FileReader类型实现的是一种异步文件读取机制，方法如下：
1.readAsText（file，encoding） 以纯文本形式读取文件，将读取的文件保存到result属性中。
2.readAsDataURL（file） 读取文件将文件以数据URI的形式保存在result中
3.readAsBinaryString（file） 读取文件并将一个字符串保存在result属性中。字符串中每个字符表示一字节
4.readAsArrayBuffer（file）读取文件并将一个包含文件内容的ArrayBuffer保存在result中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var filesList = document.getElementById("fileList");
filesList.addEventListener('change', function(event) {
var info ="",
output=document.getElementById("output"),
progress=document.getElementById("progress"),
files = event.target.files,
type= "default",
reader = new FileReader();
if(/image/.test(files[0].type)){
reader.readAsDataURL(files[0]);
type="image";
}else{
reader.readAsText(files[0]);
type="text";
}
reader.error=function(){
output.innerHTML="Could not read file"+reader.error.code;
};
reader.onprogress=function(event){
if(event.lengthComputable){
progress.innerHTML=evnet.loaded+"/"+event.total;
}
};
reader.onload=function(){
var html="";
switch(type){
case "image":
html="<img src=\""+reader.result+"\">";
break;
case "text":
html=reader.result;
break;
}
output.innerHTML = html;
};
});
};
</script>
</head>
<body>
<input type="file" name="fileList" id="fileList" value="" />
<p>output--</p>
<div id="output"></div>
<p>progress--</p>
<div id="progress"></div>
</body>
</html>
这个读取过程是异步的，因此FileReader也提供了几个事件：
1.progress 是否又读取了新数据
2.error 是否发生错误
3.load 是否已经读取完整个文件。
