卡卡網(wǎng)

本文介紹如何在圖片上傳到服務(wù)器之前預(yù)覽圖片。讓我們假設(shè)你有一個應(yīng)用，用戶上傳了一堆圖片，然后用戶只想上傳選擇的那些，這種情況下，開發(fā)者是不想上傳所有的圖片到服務(wù)器，因為這會影響服務(wù)器的開銷。

所以使用 HTML5 FileReader() 我們能夠在上傳前預(yù)覽圖片。

用戶通過可以在客戶端預(yù)覽圖片而選擇他們需要的圖片進行上傳。

下面我將介紹如何使用jQuery和實例在上傳之前預(yù)覽圖像的詳細代碼。

截圖：

預(yù)覽上傳圖像

什么是 FileReader？

FileReader 對象允許Web應(yīng)用程序異步讀取存儲在用戶計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)，這意味著你的程序在文件讀取時不會停止，這在處理大文件時特別有用。

File 對象可以從 FileList 對象獲得，FileList 對象返回用戶使用 <input> 元素選擇的文件。

以下代碼顯示了如何創(chuàng)建一個 FileReader 的新實例：

var myReader = new FileReader();

FileReader 包含4個用于讀取文件的選項：

1. FileReader.readAsBinaryString(Blob | File)：result屬性將包含二進制字符串的 file/blob 的數(shù)據(jù)。每個字節(jié)由[0..255]范圍內(nèi)的整數(shù)表示。
2. FileReader.readAsText(Blob | File，opt_encoding)：result屬性將包含文本字符串的 file/blob 的數(shù)據(jù)。默認情況下，字符串被解碼為"UTF-8"。使用可選的encoding參數(shù)可以指定不同的格式。
3. FileReader.readAsDataURL(Blob | File)：result屬性將包含編碼為 data URL 的 file/blob 的數(shù)據(jù)。
4. FileReader.readAsArrayBuffer(Blob | File)：result屬性將包含作為 ArrayBuffer 對象的 file/blob 的數(shù)據(jù)。

一旦在 FileReader 對象上調(diào)用了其中一個讀取方法，就可以使用onloadstart，onprogress，onload，onabort，onerror和onloadend來跟蹤其進度。

對于支持HTML5的瀏覽器，即Internet Explorer 10和11+，Mozilla FireFox，Google Chrome和Opera等，就可以使用HTML5 FileReader API顯示圖像預(yù)覽。

HTML 標記

這里我們添加了一個 input file 標簽和一個 div 標簽。 這個 div 標簽用來顯示縮略圖，上傳到服務(wù)器之前預(yù)覽圖像。下面給出jQuery示例：

<div id="wrapper">
  <input id="fileUpload" type="file" /><br />
  <div id="image-holder"> </div>
</div>

jQuery代碼：使用 FileReader() 設(shè)置預(yù)覽縮略圖

首先我們給 input file 標簽綁定一個 change 事件，然后檢測瀏覽器是否支持 HTML5 FileReader 方法，如果不則顯示提示信息，如：你的瀏覽器不支持。

$("#fileUpload").on('change', function () {

  if (typeof (FileReader) != "undefined") {

    var image_holder = $("#image-holder");
    image_holder.empty();

    var reader = new FileReader();
    reader.onload = function (e) {
      $("<img />", {
      "src": e.target.result,
      "class": "thumb-image"
      }).appendTo(image_holder);
    }
    image_holder.show();
    reader.readAsDataURL($(this)[0].files[0]);
  } else {
    alert("This browser does not support FileReader.");
  }
});

execcodegetcode

輸出：使用 html5 FileReader() 在上傳圖片前預(yù)覽圖片

預(yù)覽上傳圖像

如何選擇多個圖像并在上傳之前進行預(yù)覽？

我們已經(jīng)懂得如何在上傳前預(yù)覽圖片了，下面更進一步，現(xiàn)在，我們將向你介紹如何選擇多個圖像并在上傳之前進行預(yù)覽。

要上傳多個圖像，我們需要在 file input 標記中添加多個屬性。

HTML 標記：

<div id="wrapper">
  <input id="fileUpload" type="file" multiple />
  <br />
  <div id="image-holder"></div>
</div>

jQuery代碼：

現(xiàn)在我們將文件長度存儲在變量中并對其進行For循環(huán)，以訪問所有圖像。 最后，我們上傳前的多個圖像預(yù)覽代碼如下所示。

$("#fileUpload").on('change', function () {

  //Get count of selected files
  var countFiles = $(this)[0].files.length;

  var imgPath = $(this)[0].value;
  var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
  var image_holder = $("#image-holder");
  image_holder.empty();

  if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
    if (typeof (FileReader) != "undefined") {

    //loop for each file selected for uploaded.
    for (var i = 0; i < countFiles; i++) {

      var reader = new FileReader();
      reader.onload = function (e) {
      $("<img />", {
        "src": e.target.result,
        "class": "thumb-image"
      }).appendTo(image_holder);
    }

    image_holder.show();
    reader.readAsDataURL($(this)[0].files[i]);
   }

   } else {
     alert("This browser does not support FileReader.");
   }
  } else {
    alert("Pls select only images");
  }
});

execcodegetcode

標簽: JQuery  FileReader