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

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

HTML5定義了 FileReader 作為文件 API 的重要成員用于讀取文件，根據(jù) W3C 的定義，F(xiàn)ileReader接口提供了讀取文件的方法和包含讀取結(jié)果的事件模型。

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

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

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

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

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

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

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

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

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

接下來就到了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對圖片進(jìn)行壓縮
          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');
          //回調(diào)函數(shù)用以向數(shù)據(jù)庫提交數(shù)據(jù)
          self.callback(dataURL);
        };
      };
    }
  },
  event: function () {
    $("#upload").change(function (e) {      
      file.upload(e);
    });
  },
  callback: function (dataURL) {
    $.ajaxSettings.async = false;  //這里必須將ajax的異步改為同步才可以把返回并保存在隱藏域中的圖片地址取出同時加在地址欄中作為參數(shù)一并傳入下一個頁面，這樣做的目的是因為返回的圖片地址不是一個json數(shù)組，而是單個的json字符串，所以只能將返回的圖片地址json字符串拼接在一起作為參數(shù)傳到下一個頁面
    $.post(url, dataURL, function (res) {  //將base64圖片流的圖片通過后臺轉(zhuǎn)換成普通的圖片路徑并上傳至服務(wù)器
      var imgUrl = $("#hiddenImgUrl").val();
      if (res.success) {
        $(".loading").hide();
        if (imgUrl != "") {
          $("#hiddenImgUrl").val(imgUrl + "|" + res.imgUrl);  //中間加一個 | 是為了到下一個頁面便于將傳過去的圖片地址參數(shù)轉(zhuǎn)換為數(shù)組
        } 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向服務(wù)器上傳時采用了同步的方式，所以我在寫項目的過程中，老是無法實(shí)現(xiàn)加載中的動畫效果，并且把加載中的動畫效果放在 reader.onloadstart方法中依舊不起作用，最后只能放在了$("#upload").change(function (e) {})方法中，代碼如下：

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

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

callback: function (dataURL) {    
    $.post(url, dataURL, function (res) {  //將base64圖片流的圖片通過后臺轉(zhuǎn)換成普通的圖片路徑并上傳至服務(wù)器
      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壓縮圖片的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！