web前端之——圖片上傳

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

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

　　 二、通過后台接口，將圖片上傳到服務器中（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 ，介紹的很詳細。

一、實現圖片及時預覽

首先是html代碼：

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

  <!-- 圖片展示區域 -->
  <ul id="imgList"></ul>

 

css樣式：

<style>
    ul{
      list-style: none;
    }
    li{
      float: left;
      border: 1px solid #000;
      margin: 10px;
    }
    li img{
      display:block;
    }
    div{
      width: 0%;
      height: 20px;
      background-color: lightcoral;
    }
  </style>

 

頁面效果是這樣子：

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

 function getFileContent(){
　　// file[0]就是上傳的圖片本身
　　// FileReader的readAsDataURL方法可以將圖片轉換為base64格式
　　// 1.上傳單個文件時： 
      var reader = new FileReader();
      var file = document.querySelector("#myFile").files;
      reader.readAsDataURL(file[0]);
      // 一定要在文件讀取 成功完成時 再進行相應的操作：
      reader.onload = function(){
          document.querySelector("img").src = reader.result;
      }
  }

 

其中file打印出是：里面包含用戶上傳的文件名稱、大小、類型，如果想限制圖片大小和類型，可以自行添加判定條件~

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

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

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

function getFileContent(){
      // 上傳多個文件時：
      var file = document.querySelector("#myFile").files;
      var totalSize = 0;
      // 限定文件總數不能超過的大小
      var maxSize = 10*1024*1024; 
      for(var i=0;i<file.length;i++){
        totalSize += file[i].size;
        if(file[i].size > maxSize){
          alert("文件不能超過10M")
          return false;
        }else{
          // 調用上傳多個圖片的方法，傳入的參數為：用戶選中的文件 和 每個圖片的 index
          uploadMultiImg(file,i);
        }
      }
 }

// 上傳多個圖片的方法：
    function uploadMultiImg(file,index){
        var li = document.createElement("li");
        ul.appendChild(li);
        var img = document.createElement("img");
        li.appendChild(img);
        /*1.1 由於IE9以下沒有FileReader，因此先判斷是否支持FileReader  並且  創建文件讀取對象*/
         if(window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的設備不支持圖片預覽功能，如需該功能請升級您的設備！");
        }
        // 1.2 是否是圖片
        var imageType = /^image\//;
        if(!imageType.test(file[index].type)) {
          alert("請選擇圖片！");
          return;
        }
         /*2.讀取文件，獲取DataURL
        * 2.1.說明沒有任何的返回值:void：但是讀取完文件之后，它會將讀取的結果存儲在文件讀取對象的result中
        * 2.2.需要傳遞一個參數 binary large object:文件(圖片或者其它可以嵌入到文檔的類型)
        * 2.3:文件存儲在file表單元素的files屬性中，它是一個數組*/
        reader.readAsDataURL(file[index]);
        /*獲取數據*/
        reader.onload = function(){
          /*展示：圖片路徑設置為讀取的圖片*/
          img.src = reader.result;
          img.style.width = '300px';
          img.style.height = '300px';
        }

        // 進度條
        reader.onprogress = function(e){
          var percent = e.loaded / e.total * 100 + '%';
          div.style.width = percent;
          var number = (e.loaded / e.total * 100).toString().substring(0,5) + '%';
          div.innerText = number;
        }
    }

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

最終效果：

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

參考文章：

https://blog.csdn.net/lijia_1983370657/article/details/80489979

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

https://www.cnblogs.com/hutuzhu/p/4409292.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() 方法來手動添加 如用戶名、文件等內容。

var formData = new FormData($('#form1'));
// formData.append('images', $('#myFile')[0].files);
//ajax請求
$.ajax({
            type: "post",
            url:  "接口地址",
            data: formdata,
            dataType: 'json',
            processData: false, // 告訴jQuery不要去處理發送的數據
            contentType: false, // 告訴jQuery不要去設置Content-Type請求頭
            xhrFields:{withCredentials:true},
            async: true,    //默認是true：異步，false：同步。
            success: function (data) {
                callback(data);
            },
            error: function (data) {
                layer.msg('請求異常');
            },
});

如果使用原生js實現，如下代碼：

function fsubmit() {
       var form=document.getElementById("form1");
       var formData=new FormData(form);
       var oReq = new XMLHttpRequest();
       oReq.onreadystatechange=function(){
           if(oReq.readyState==4){
              if(oReq.status==200){
                  var json=JSON.parse(oReq.responseText);
                  var result = '';
                  // result += 'name=' + ret['name'] + '<br>';
                  // result += 'gender=' + ret['gender'] + '<br>';
                  result += '<img src="' + json['photo'] + '" width="100">';
                  $('#result').html(result);
              }
            }
        }
        oReq.open("POST", "server.php");
        oReq.send(formData); 
        return false;
}