一 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()对象时，系统为应用创建一个沙箱文件，并为其指定一个名称。