在HTML5中，提供了一個關於文件操作的API，通過這個API，對於從web頁面上訪問本地文件系統的相關處理變得十分簡單。到目前為止只有部分瀏覽器對它提供支持。
1.FileList對象和File對象
FileList對象表示用戶選擇的文件列表，在HTML4中file控件內只允許放置一個文件，但在HTML5中通過添加multiple屬性，file控件內允許放置多個文件。控件內的每一個用戶選擇的文件都是一個file對象，而FileList就是這些file對象的列表，代表用戶選擇的所有文件。file對象有兩個屬性，一個是name，代表文件名不包含文件的路徑；一個是lastModifiedDate，表示文件最后被修改的日期。
View Code
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset='UTF-8'/>
5 <title>FileList and File </title>
6 <script type="text/javascript" language="JavaScript">
7 function showFiles(){
8 var file,
9 len = document.getElementById('file').files.length;//返回FileList文件列表對象
10 for (var i=0; i < len; i++) {
11 file = document.getElementById('file').files[i];
12 alert(file.name);
13 };
14
15 }
16 </script>
17 </head>
18 <body>
19 <input type="file" id='file' multiple="multiple" width="80px"/>
20 <input type="button" id="bt1" value="click" onclick="showFiles();"/>
21 </body>
22 </html>
2.Blob對象
提到Blob對象，估計有人會想起OracleDB中Blob字段，意義上有些類似。HTML5中Blob表示二進制原始數據，它提供一個slice()方法，可以通過這個方法訪問到字節內部的原始數據塊。事實上，上面提到的file對象繼承了Blob對象。
Blob對象的兩個屬性，size：表示一個對象的字節長度。type：表示一個對象的MIME類型，如若是未知類型返回空字符串。
View Code
1 function showFileInfo(){
2 var file = document.getElementById('file').files[0];
3 var size = document.getElementById('fileType');
4 var type = document.getElementById('fileSize');
5 size.innerHTML = file.size;
6 type.innerHTML = file.type;
7 }
對於圖像類型的文件，Blob對象的type屬性都是以image/開頭，可以利用這個特性對用戶選擇的文件類型做判斷。
View Code
1 function showFileInfo(){
2 var file = document.getElementById('file').files[0];
3 if(checkImage(file)){
4 var size = document.getElementById('fileType');
5 var type = document.getElementById('fileSize');
6 size.innerHTML = file.size;
7 type.innerHTML = file.type;
8 }
9 else{
10 return ;
11 }
12 }
13 function checkImage(file){
14 if(!/img\/\w+/.test(file.type)){
15 alert(file.name + "不是圖片");
16 return false;
17 }
18 return true;
19 }
另外，file控件在HTML5標准中添加了accept屬性，用來限制接受的文件類型，但目前各瀏覽器對齊支持都僅限於在打開文件選擇窗口時默認的選擇圖像文件而已，如果選擇其他類型，控件也能接受。
3.FileReader接口
3.1接口方法
FileReader接口提供了四個方法，其中3個用來讀取文件，1個用來中斷文件的讀取。
| 方法名 | 參數 | 描述 |
| readAsBinaryString() | file | 將文件讀取為二進制字符串，通常將它傳到后端，后端可以通過這段字符串存儲文件 |
| readAsDataURL() | file | 將文件讀取為一段data url字符串，事實上是將小文件以一種特格式的URL地址直接讀取到頁面。小文件通常指圖片與html等格式文件 |
| readAsText() | file [encoding] | 將文件以文本的方式讀取，其中第二個參數為文本的編碼。 |
| abort() | (none) | 中斷讀取操作。 |
需要注意的是，無論讀取成功還是失敗，方法都不會返回讀取結果，結果返回在result屬性中。
3.2接口事件
FileReader接口提供了一套完整的事件模型，用於捕獲讀取文件時的狀態。
| 事件 | 描述 |
| onabort | 數據讀取中斷時發生 |
| onerror | 數據讀取出錯時發生 |
| onloadstart | 數據讀取開始時發生 |
| onload | 數據讀取成功完成時發生 |
| onloadend | 數據讀取完成時發生無論讀取成功還是失敗 |
| onprogess | 數據讀取中 |
3.3實例
View Code
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6 <title>FileReader</title>
7 <meta name="description" content="" />
8 <meta name="viewport" content="width=device-width; initial-scale=1.0" />
9 <script type="text/javascript" language="JavaScript">
10 var file ,
11 result;
12 function myLoad() {
13 file = document.getElementById('file').files[0];
14 result = document.getElementById('result');
15 }
16 if(typeof FileReader == 'undefined'){
17 result.innerHTML = "你的瀏覽器不支持 FileReader";
18 file.setAttribute("disabled","disabled");
19 }
20 function readAsDataURL(){
21 if(!/image\/\w+/.test(file.type)){
22 alert(file.name + '不是一個圖片類型的文件');
23 }else{
24 var reader = new FileReader();
25 reader.readAsDataURL(file);
26 reader.onload = function(e){
27
28 result.innerHTML = "<img src=" + reader.result +"/>";
29 };
30 }
31 }
32 function readAsBinaryString(){
33 var reader = new FileReader();
34 reader.readAsBinaryString(file);
35 reader.onload = function(e){
36 result.innerHTML = reader.result;
37 };
38 }
39 function readAsText(){
40 var reader = new FileReader();
41 reader.readAsText(file);
42 reader.onload=function(e){
43 result.innerHTML = reader.result;
44 };
45 }
46 </script>
47
48 </head>
49 <body onload="myLoad();">
50 <p>
51 <input type="file" id='file'/>
52 <input type='button' id="bt_DataURL" value="讀取圖片" onclick="readAsDataURL();"/>
53 <input type="button" id="bt_BinaryString" value="讀取二進制字符串" onclick="readAsBinaryString();"/>
54 <input type="button" id="bt_textString" value="讀取文本信息" onclick="readAsText();"/>
55 </p>
56 <div id="result">
57
58 </div>
59 </body>
60 </html>