這篇文章主要是為了介紹一種文件上傳的方式。當然文件中是包含圖片的。如果大家仔細看我的第一篇web前端圖片上傳(1)就會知道，其實也是按照這種方式上傳你的，但是由於上次時間比較緊張，沒有詳細的介紹今天的主角filereader對象。今天就來好好的看看他。
以下是他常用的幾種方法。
- abort none 中斷讀取
- readAsBinaryString file（blob） 將文件讀取為二進制碼
- readAsDataURL file（blob） 將文件讀取為 DataURL
- readAsText file, （blob） 將文件讀取為文本
但是這個可能不好理解是吧。咱們直接上程序，看看程序中是怎么運行的。我期中會加上自己的注釋，方便大家查詢。同樣的，這段程序直接放在編輯器里面，然后直接運行就好了。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>FileReader</title>
6 </head>
7 <body>
8 <p>
9 <label>請選擇一個文件：</label>
10 <input type="file" id="file" />
11 <input type="button" value="讀取圖像" onclick="readAsDataURL()" />
12 <input type="button" value="讀取二進制數據" onclick="readAsBinaryString()" />
13 <input type="button" value="讀取文本文件" onclick="readAsText()" />
14 </p>
15 <div id="result" name="result"></div>
16 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
17 <script type="text/javascript">
18 var result = document.getElementById("result"); 19 var file = document.getElementById("file"); 20 //判斷瀏覽器是否支持FileReader接口
21 if(typeof FileReader == 'undefined') { 22 result.InnerHTML = "<p>你的瀏覽器不支持FileReader接口！</p>"; 23 //使選擇控件不可操作
24 file.setAttribute("disabled", "disabled"); 25 } 26 function readAsDataURL() { 27 //檢驗是否為圖像文件
28 //var file = document.getElementById("file").files[0];//js的寫法，也可以寫成jquery的
29 var file = $("#file").prop("files")[0];//jquery的寫法
30 if(!/image\/\w+/.test(file.type)) { 31 alert("看清楚，這個需要圖片！"); 32 return false; 33 } 34 var reader = new FileReader(); 35 //將文件以Data URL形式讀入頁面
36 reader.readAsDataURL(file); 37 reader.onload = function(e) { 38 console.log(this.result); 39 var result = document.getElementById("result"); 40 //顯示文件
41 result.innerHTML = '<img src="' + this.result + '" alt="" />'; 42 } 43 } 44
45 function readAsBinaryString() { 46 var file = document.getElementById("file").files[0]; 47 var reader = new FileReader(); 48 //將文件以二進制形式讀入頁面
49 reader.readAsBinaryString(file); 50 reader.onload = function(f) { 51 console.log(f); 52 console.log(this.result); 53 var result = document.getElementById("result"); 54 //顯示文件
55 result.innerHTML = this.result; 56 } 57 } 58
59 function readAsText() { 60 var file = document.getElementById("file").files[0]; 61 var reader = new FileReader(); 62 //將文件以文本形式讀入頁面
63 reader.readAsText(file); 64 reader.onload = function(f) { 65 var result = document.getElementById("result"); 66 //顯示文件
67 result.innerHTML = this.result; 68 } 69 } 70 </script>
71 </body>
72 </html>
這里說下程序中的28行和29行，是js和jq的兩種寫法，而且jq中只能寫porp，寫attr是會報錯的，不知道是不是我的jq版本的問題。
readAsDataURL（）這個方法其實就是把這個文件轉換成為了base64的格式，如果是中圖片的話，那就是圖片的base64格式。
readAsText（）這個方法就是讀取成為文本，如果你上傳的是一個txt的文件，那么是直接可以讀出來你們的文本信息的，但是doc文檔格式是不可以的。當然了，html的格式是可以的。
至於51行和52行的打印，是為了看到，究竟是哪個是咱們需要的文件格式，發現了，this.result才是咱們需要的東西。而里面的f並不是。f.target.result這個才是咱們需要的字段。
最后還是附上我前兩篇文章的鏈接吧。方便大家查閱。web前端圖片上傳(1)，web前端圖片上傳(2)