這篇文章主要是為了介紹一種文件上傳的方式。當然文件中是包含圖片的。如果大家仔細看我的第一篇web前端圖片上傳(1)就會知道，其實也是按照這種方式上傳你的，但是由於上次時間比較緊張，沒有詳細的介紹今天的主角filereader對象。今天就來好好的看看他。 以下是他常用的幾種方法。 但是這個可能不好理解 ...
這篇文章主要是為了介紹一種文件上傳的方式。當然文件中是包含圖片的。如果大家仔細看我的第一篇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)
