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

時間 2019-12-20

標籤 web 前端圖片上傳 filereader 欄目 HTML 简体版

原文原文鏈接

　　這篇文章主要是爲了介紹一種文件上傳的方式。固然文件中是包含圖片的。若是你們仔細看個人第一篇web前端圖片上傳(1)就會知道，其實也是按照這種方式上傳你的，可是因爲上次時間比較緊張，沒有詳細的介紹今天的主角filereader對象。今天就來好好的看看他。javascript

如下是他經常使用的幾種方法。html

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版本的問題。java

readAsDataURL（）這個方法其實就是把這個文件轉換成爲了base64的格式，若是是中圖片的話，那就是圖片的base64格式。

readAsText（）這個方法就是讀取成爲文本，若是你上傳的是一個txt的文件，那麼是直接能夠讀出來大家的文本信息的，可是doc文檔格式是不能夠的。固然了，html的格式是能夠的。

至於51行和52行的打印，是爲了看到，到底是哪一個是我們須要的文件格式，發現了，this.result纔是我們須要的東西。而裏面的f並非。f.target.result這個纔是我們須要的字段。

最後仍是附上我前兩篇文章的連接吧。方便你們查閱。web前端圖片上傳(1)，web前端圖片上傳(2)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。