一 File对象与FileList对象
当将input元素的type类型设置为file时，web页面上会显示一个选择文本按钮和一个文本显示框，单击文件按钮可以选择一个文件，文本显示框中会显示选中的文件名称。
input元素设置multiple属性，可以选择多个文件，文本显示框中会显示选中了几个文件。
在这个过程中，用户选中的每一个对象都是一个file对象，用户选中的对个对象的集合就是fileList对象。File对象有两个属性，name属性表示文件名，但不包含文件的路径；
lastModifiedDate属性表示文件的最后修改的日期。
multiple：是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <script type="text/javascript">
7
8 function show(){
9 var file,filelist,mySpan;
10 file=document.getElementById("file");
11 filelist=file.files;
12 mySpan=document.getElementById("mySpan");
13 var names="";
14 for(var i=0;i<filelist.length;i++){
15 names+=filelist[i].name+"<br />";
16
17 }
18 mySpan.innerHTML=names;
19 }
20 </script>
21 </head>
22 <body>
23 <input type="file" id="file" multiple />
24 <input type="button" onclick="show();" value="上传文件" /><br />
25 <span id="mySpan">文件名字</span>
26 </body>
27 </html>
二FileReader对象：读取文件里面的数据
FileReader对象用于读取文件里面的数据，并将这些数据读入内存。根据文件类型，可以选择不同的读取文件，并在异步读取文件的过程中触发多个事件。
1.FileReader对象
HTML5中的FileReader对象一共有4个方法，readAsBinaryString以二进制方式读取文件，readAsText以文本方式读取文件，readAsDateURL以DateURL方式读取文件，abort方法是中断读取操作。FileReader对象有一个result属性，用于存储读取文件的结果。
2.fileReader对象的事件
FileReader对象在异步读取文件时会触发很多事件，根据不同的事件处理不同的操作，可以使程序更加人性化和健壮。
3.以二进制方式读取文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>7.3.1</title>
<script language="javascript">
//以二进制方式读入文件
function fileBinary()
{
var myDiv=document.getElementById("myDiv");
//判断浏览器是否支持FileReader
if(typeof FileReader=="undefined")
{
myDiv.innerHTML="<h2>您的浏览器不支持FileReader！</h2>";
return false;
}
var file=document.getElementById("file").files[0];
var reader=new FileReader();
//以二进制方式读入文件
reader.readAsBinaryString(file);
reader.onload =function(e)
{
myDiv.innerHTML=this.result;
}
}
</script>
</head>
<body>
<input type="file" id="file" />
<input type="button" onClick="fileBinary();" value="二进制读取文件" />
<div id="myDiv" name="myDiv"></div>
</body>
</html>
4.以文本的方式读取文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>7.3.2</title>
<script language="javascript">
//以文本方式读取文件
function fileText()
{
var myDiv=document.getElementById("myDiv");
//判断浏览器是否支持FileReader
if(typeof FileReader=="undefined")
{
myDiv.innerHTML="<h2>您的浏览器不支持FileReader！</h2>";
return false;
}
var file=document.getElementById("file").files[0];
var reader=new FileReader();
//以文本方式读取文件
reader.readAsText(file);
reader.onload=function(e)
{
myDiv.innerHTML=this.result;
}
}
</script>
</head>
<body>
<input type="file" id="file" />
<input type="button" onClick="fileText();" value="文本读取文件" />
<div id="myDiv" name="myDiv"></div>
</body>
</html>
5.以DateURL方式读取文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>7.3.3</title>
<script language="javascript">
//以DataURL方式读取文件
function fileDataURL()
{
var myDiv=document.getElementById("myDiv");
//判断浏览器是否支持FileReader
if(typeof FileReader=="undefined")
{
myDiv.innerHTML="<h2>您的浏览器不支持FileReader！</h2>";
return false;
}
var file=document.getElementById("file").files[0];
//判断文件类型
if(!/image\/\w+/.test(file.type))
{
myDiv.innerHTML="<h2>请选择图像文件！</h2>";
return false;
}
var reader=new FileReader();
//以DataURL方式读取文件
reader.readAsDataURL(file);
reader.onload=function(e)
{
myDiv.innerHTML="<img src=‘"+this.result+"‘ />";
}
}
</script>
</head>
<body>
<input type="file" id="file" />
<input type="button" onClick="fileDataURL();" value="DataURL读取文件" />
<div id="myDiv" name="myDiv"></div>
</body>
</html>
三.FileSystem对象
1.FileSystem对象介绍
FileSystem的主要功能有以下三个方面
①读取和处理文件：file/Blob、FileList、FileReader。
②创建和写入：BlobBuilder、FileWriter
③目录和文件系统访问：DirectoryReader、FileEntry/DirectoryEntry、LocalFileSystem。
2.请求文件系统
基于安全原因，Web应用通过浏览器的脚本去操作本地文件，首先需要获取操作许可，否则通过浏览器可以随意修改本地文件的是非常不安全的。通过调用Window.requestFileSystem()方法可以请求对文件系统的访问权限。
Window.requestFileSystem()方法需要4个参数，各参数的含义如下所示：
①type文件存储是否应该持久。如果设置为window.TEMPORARY,当浏览器需要更多空间时可自行决定是否删除该文件；如果设置为window.PERSISTENT,则需要获取用户或应用的明确授权才可以删除。
②size指定请求文件的大小，以字节为单位。
③successCallback 当文件系统请求成功后的回调函数，参数为FileSystem对象。
④errorCallback 当文件系统请求失败或错误时的回调函数，参数为FileError对象。
注意 ：首次调用window.requestFileSystem()对象时，系统为应用创建一个沙箱文件，并为其指定一个名称。