JS移動端/H5同時選擇多張圖片上傳并使用canvas壓縮圖片的示例分析

小編給大家分享一下JS移動端/H5同時選擇多張圖片上傳并使用canvas壓縮圖片的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

HTML5定義了 FileReader 作為文件 API 的重要成員用于讀取文件，根據 W3C 的定義，FileReader接口提供了讀取文件的方法和包含讀取結果的事件模型。

FileReader的實例擁有 4 個方法，其中 3 個用以讀取文件，另一個用來中斷讀取。下面的表格列出了這些方法以及他們的參數和功能，需要注意的是 ，無論讀取成功或失敗，方法并不會返回讀取結果，這一結果存儲在 result 屬性中。

readAsText：該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值為 UTF-8。這個方法非常容易理解，將文件以文本方式讀取，讀取的結果即是這個文本文件中的內容。

readAsBinaryString：該方法將文件讀取為二進制字符串，通常我們將它傳送到后端，后端可以通過這段字符串存儲文件。

readAsDataURL：這是例子程序中用到的方法，該方法將文件讀取為一段以 data: 開頭的字符串，這段字符串的實質就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件。

FileReader還包含了一套完整的事件模型，用于捕獲讀取文件時的狀態，下面這個表格歸納了這些事件。

文件一旦開始讀取，無論成功或失敗，實例的 result 屬性都會被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結果，絕大多數的程序都會在成功讀取文件的時候，抓取這個值。

了解了H5提供的 FileReader 后，我們就使用 FileReader 來實現同事選擇多張圖片并上傳。

首先，在 HTML 加入一個file表單，并設置其為 multiple（瀏覽器在對multiple、disabled、checked、selected等這類屬性進行解析時，只要這些屬性存在，默認的就會被解析成true，甭管你設置的是disabled=true或者disabled=false亦或是disabled=""，如果不想這些屬性起作用，唯有用js來remove掉這些屬性，除非你不設置這些屬性。），并設置accept="image/*"用以只能選擇圖片類型的文件，代碼如下：

<input type="file" accept="image/*" name="upload" id="upload" multiple>
<input type="hidden" id="hiddenImgUrl" />  <!--設置這個隱藏域是為了便于存放上傳至服務器后返回的圖片地址-->

接下來就到了js上場了：

//圖片上傳
var file = {
  upload: function (e) {
    var self = this;
    var files = e.target.files;
    var type = files[0].type.split('/')[0];
    if (type != 'image') {
      alertMsg('請上傳圖片');
      return;
    }
    //var size = Math.floor(file.size / 1024 / 1024);
    //if (size > 3) {
    //  alert('圖片大小不得超過3M');
    //  return;
    //};
    for (var i = 0; i < files.length; i++) {
      var reader = new FileReader();
      reader.readAsDataURL(files[i]);
      reader.onloadstart = function () {
        //用以在上傳前加入一些事件或效果，如載入中...的動畫效果
      };
      reader.onloadend = function (e) {
        var dataURL = this.result;
        var imaged = new Image();
        imaged.src = dataURL;
        imaged.onload = function () {  //利用canvas對圖片進行壓縮
          var canvas = document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          var w = 0;
          var h = 0;
          if (this.width > this.height) {
            h = 1000;
            var scale = this.width / this.height;
            h = h > this.height ? this.height : h;
            w = h * scale;
          }
          else {
            w = 1000;
            var scale = this.width / this.height;
            w = w > this.width ? this.width : w
            h = w / scale;
          }
          var anw = document.createAttribute("width");
          var anh = document.createAttribute("height");
          if (this.width > this.height) {
            anw.value = h;
            anh.value = w;
          }
          else {
            anw.value = w;
            anh.value = h;
          }
          canvas.setAttributeNode(anw);
          canvas.setAttributeNode(anh);
          if (this.width > this.height) {
            ctx.translate(h, 0);
            ctx.rotate(90 * Math.PI / 180)
            ctx.drawImage(this, 0, 0, w, h);
            ctx.restore();
          }
          else {
            ctx.drawImage(this, 0, 0, w, h);
          }
          dataURL = canvas.toDataURL('image/jpeg');
          //回調函數用以向數據庫提交數據
          self.callback(dataURL);
        };
      };
    }
  },
  event: function () {
    $("#upload").change(function (e) {      
      file.upload(e);
    });
  },
  callback: function (dataURL) {
    $.ajaxSettings.async = false;  //這里必須將ajax的異步改為同步才可以把返回并保存在隱藏域中的圖片地址取出同時加在地址欄中作為參數一并傳入下一個頁面，這樣做的目的是因為返回的圖片地址不是一個json數組，而是單個的json字符串，所以只能將返回的圖片地址json字符串拼接在一起作為參數傳到下一個頁面
    $.post(url, dataURL, function (res) {  //將base64圖片流的圖片通過后臺轉換成普通的圖片路徑并上傳至服務器
      var imgUrl = $("#hiddenImgUrl").val();
      if (res.success) {
        $(".loading").hide();
        if (imgUrl != "") {
          $("#hiddenImgUrl").val(imgUrl + "|" + res.imgUrl);  //中間加一個 | 是為了到下一個頁面便于將傳過去的圖片地址參數轉換為數組
        } else {
          $("#hiddenImgUrl").val(res.imgUrl);
        }
        var imgUrl = $("#hiddenImgUrl").val();
        window.location.href = "apply.html?imgUrl=" + imgUrl;
      } else {
        alert(res.message);
      }
    }, "json");
  },
  init: function () {
    this.event();
  }
}
file.init();

由于在通過post向服務器上傳時采用了同步的方式，所以我在寫項目的過程中，老是無法實現加載中的動畫效果，并且把加載中的動畫效果放在 reader.onloadstart方法中依舊不起作用，最后只能放在了$("#upload").change(function (e) {})方法中，代碼如下：

event: function () {
    $("#upload").change(function (e) {
      $(".loading").show();     
      file.upload(e);
    });
  }

以上是同時上傳多張圖片并將圖片傳入下一個頁面繼續進行后續操作，那么如何在同時上傳完多張圖片后在本頁再預覽這些圖片呢？其實方法也是很簡單的，上邊callback函數里邊的$.post的返回值里就包含了上傳至服務器后的圖片路徑，將這些路徑賦給img標簽的src，然后再插入到頁面中就OK了，代碼如下：

callback: function (dataURL) {    
    $.post(url, dataURL, function (res) {  //將base64圖片流的圖片通過后臺轉換成普通的圖片路徑并上傳至服務器
      if (res.success) {
        $(".loading").hide();
        var result = '<div class="result"><img src="'+res.imgUrl+'" alt=""/></div>';
        var div = document.createElement('div');
        div.innerHTML = result;
        document.body.appendChild(div);        
      } else {
        alert(res.message);
      }
    }, "json");
  }

以上是“JS移動端/H5同時選擇多張圖片上傳并使用canvas壓縮圖片的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！