web前端之——圖片上傳

本文主要討論如下兩部分：

　　 1、實現圖片及時預覽，將用戶選中的圖片及時顯示在前臺頁面（利用FileReader實現）；不用經過後臺接口返回的圖片地址賦值給src再展現到前臺，減小先後臺的頻繁交互；

　　 2、經過後臺接口，將圖片上傳到服務器中（FormData）。

---

 

首先介紹一下h5新增的FileReader對象（）：

FileReader:讀取文件內容

   1. readAsText(): 讀取文本文件(可使用Txt打開的文件)，返回文本字符串，默認編碼是UTF-8

   2. readAsBinaryString(): 讀取任意類型的文件。返回二進制字符串。這個方法不是用來讀取文件展現給用戶看，而是存儲文件。例如：讀取文件的內容，獲取二進制數據，傳遞給後臺，後臺接收了數據以後，再將數據存儲

   3 . readAsDataURL(): 讀取文件獲取一段以data開頭的字符串，這段字符串的本質就是DataURL.DataURL是一種將文件(這個文件通常就是指圖像或者可以嵌入到文檔的文件格式) 嵌入到文檔的方案。DataURL是將資源轉換爲base64編碼的字符串形式，而且將這些內容直接存儲在url中>>優化網站的加載速度和執行效率。

   4. abort():中斷讀取

 

FileReader 提供一個完整的事件模型，用來捕獲讀取文件時的狀態

　- onabort: 讀取文件中斷片時觸發

　- onerror: 讀取錯誤時觸發

　- onload: 文件讀取成功完成時觸發

　- onloadend: 讀取完成時觸發，不管成功仍是失敗

　- onloadstart: 開始讀取時觸發

　- onprogress: 讀取文件過程當中持續觸發

 具體能夠參考 https://www.cnblogs.com/hhhyaaon/p/5929492.html ，介紹的很詳細。

1、實現圖片及時預覽

首先是html代碼：

1 <form action="" enctype="multipart/form-data" method="post" name="form1" id="form1">
2    文件：<input type="file" name="myFile" id="myFile" onchange="getFileContent();" multiple>
3      <!-- 進度條 -->
4       <div></div>
5     <input type="submit">
6   </form>

7   <!-- 圖片展現區域 -->
8   <ul id="imgList"></ul>

 

css樣式：

 1 <style>
 2     ul{
 3       list-style: none;
 4     }
 5     li{
 6       float: left;
 7       border: 1px solid #000;
 8       margin: 10px;
 9     }
10     li img{
11       display:block;
12     }
13     div{
14       width: 0%;
15       height: 20px;
16       background-color: lightcoral;
17     }
18   </style>

 

頁面效果是這樣子：

一、上傳 單個圖片 的js代碼：

 1  function getFileContent(){
 2 　　// file[0]就是上傳的圖片自己
 3 　　// FileReader的readAsDataURL方法能夠將圖片轉換爲base64格式
 4 　　// 1.上傳單個文件時： 
 5       var reader = new FileReader();
 6       var file = document.querySelector("#myFile").files;
 7       reader.readAsDataURL(file[0]);
 8       // 必定要在文件讀取 成功完成時 再進行相應的操做：
 9       reader.onload = function(){
10           document.querySelector("img").src = reader.result;
11       }
12   }

 

其中file打印出是：裏面包含用戶上傳的文件名稱、大小、類型，若是想限制圖片大小和類型，能夠自行添加斷定條件~

二、上傳 多個圖片 的js代碼：

    每上傳一張圖片（一個文件）就須要創新建立一個 FileReader 實例，不然會出現一些問題（只成功上傳了選中的最後一張圖片）；

　這裏將上傳單個圖片封裝爲一個函數，在循環遍歷用戶選擇的文件時，一一上傳圖片，每一個圖片都有上傳時的進度條。

 1 function getFileContent(){
 2       // 上傳多個文件時：
 3       var file = document.querySelector("#myFile").files;
 4       var totalSize = 0;
 5       // 限定文件總數不能超過的大小
 6       var maxSize = 10*1024*1024; 
 7       for(var i=0;i<file.length;i++){
 8         totalSize += file[i].size;
 9         if(file[i].size > maxSize){
10           alert("文件不能超過10M")
11           return false;
12         }else{
13           // 調用上傳多個圖片的方法，傳入的參數爲：用戶選中的文件 和 每一個圖片的 index
14           uploadMultiImg(file,i);
15         }
16       }
17  }
18 
19 // 上傳多個圖片的方法：
20     function uploadMultiImg(file,index){
21         var li = document.createElement("li");
22         ul.appendChild(li);
23         var img = document.createElement("img");
24         li.appendChild(img);
25         /*1.1 因爲IE9如下沒有FileReader，所以先判斷是否支持FileReader  而且  建立文件讀取對象*/
26          if(window.FileReader) {
27             var reader = new FileReader();
28         } else {
29             alert("您的設備不支持圖片預覽功能，如需該功能請升級您的設備！");
30         }
31         // 1.2 是不是圖片
32         var imageType = /^image\//;
33         if(!imageType.test(file[index].type)) {
34           alert("請選擇圖片！");
35           return;
36         }
37          /*2.讀取文件，獲取DataURL
38         * 2.1.說明沒有任何的返回值:void：可是讀取完文件以後，它會將讀取的結果存儲在文件讀取對象的result中
39         * 2.2.須要傳遞一個參數 binary large object:文件(圖片或者其它能夠嵌入到文檔的類型)
40         * 2.3:文件存儲在file表單元素的files屬性中，它是一個數組*/
41         reader.readAsDataURL(file[index]);
42         /*獲取數據*/
43         reader.onload = function(){
44           /*展現：圖片路徑設置爲讀取的圖片*/
45           img.src = reader.result;
46           img.style.width = '300px';
47           img.style.height = '300px';
48         }
49 
50         // 進度條
51         reader.onprogress = function(e){
52           var percent = e.loaded / e.total * 100 + '%';
53           div.style.width = percent;
54           var number = (e.loaded / e.total * 100).toString().substring(0,5) + '%';
55           div.innerText = number;
56         }
57     }

進度條是經過reader.onprogress()方法實現，打印e：loaded是已上傳的大小，total是文件總大小。經過兩者的比例能夠自定義一個進度條。

最終效果：

2、將圖片上傳到服務器中（FormData對象）

參考文章：

http://www.javashuo.com/article/p-xflvhtae-ks.html

https://blog.csdn.net/thunderevil35/article/details/80953236

http://www.javashuo.com/article/p-hejswmrl-y.html

 

使用 h5的 formData 對象 用ajax異步的方式提交form表單（還能夠實現異步提交文件）

 在使用 jquery 發送圖片到後臺時要注意幾點：

•  <form>標籤添加 enctype="multipart/form-data" 屬性
•  jQuery 的 ajax 中 processData 設置爲 false （表示不須要對數據作處理）
•  jQuery 的 ajax 中 cache 設置爲 false （表示上傳文件不須要緩存）
•  jQuery 的 ajax 中 contentType 設置爲 false （由於前面已經聲明瞭是‘FormData對象’）

 若是沒有<form>標籤，也沒有 enctype="multipart/form-data" 屬性,可使用 FormData 的 append() 方法來手動添加 如用戶名、文件等內容。

 1 var formData = new FormData($('#form1'));
 2 // formData.append('images', $('#myFile')[0].files);
 3 //ajax請求
 4 $.ajax({
 5             type: "post",
 6             url:  "接口地址",
 7             data: formdata,
 8             dataType: 'json',
 9             processData: false, // 告訴jQuery不要去處理髮送的數據
10             contentType: false, // 告訴jQuery不要去設置Content-Type請求頭
11             xhrFields:{withCredentials:true},
12             async: true,    //默認是true：異步，false：同步。
13             success: function (data) {
14                 callback(data);
15             },
16             error: function (data) {
17                 layer.msg('請求異常');
18             },
19 });

若是使用原生js實現，以下代碼：

 1 function fsubmit() {
 2        var form=document.getElementById("form1");
 3        var formData=new FormData(form);
 4        var oReq = new XMLHttpRequest();
 5        oReq.onreadystatechange=function(){
 6            if(oReq.readyState==4){
 7               if(oReq.status==200){
 8                   var json=JSON.parse(oReq.responseText);
 9                   var result = '';
10                   // result += 'name=' + ret['name'] + '<br>';
11                   // result += 'gender=' + ret['gender'] + '<br>';
12                   result += '<img src="' + json['photo'] + '" width="100">';
13                   $('#result').html(result);
14               }
15             }
16         }
17         oReq.open("POST", "server.php");
18         oReq.send(formData); 
19         return false;
20 }