web前端圖片上傳(3)–filereader

程先生哈發表於2018-11-07
Web前端

　　這篇文章主要是為了介紹一種檔案上傳的方式。當然檔案中是包含圖片的。如果大家仔細看我的第一篇web前端圖片上傳(1)就會知道，其實也是按照這種方式上傳你的，但是由於上次時間比較緊張，沒有詳細的介紹今天的主角filereader物件。今天就來好好的看看他。

以下是他常用的幾種方法。

  1. abort  none 中斷讀取
  2. readAsBinaryString file（blob） 將檔案讀取為二進位制碼
  3. readAsDataURL file（blob） 將檔案讀取為 DataURL
  4. 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)

相關文章