卡卡網(wǎng)

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

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

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

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

截圖：

預(yù)覽上傳圖像

什么是 FileReader？

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

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

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

var myReader = new FileReader();

FileReader 包含4個(gè)用于讀取文件的選項(xiàng)：

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

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

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

HTML 標(biāo)記

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

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

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

首先我們給 input file 標(biāo)簽綁定一個(gè) change 事件，然后檢測(cè)瀏覽器是否支持 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ù)覽上傳圖像

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

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

要上傳多個(gè)圖像，我們需要在 file input 標(biāo)記中添加多個(gè)屬性。

HTML 標(biāo)記：

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

jQuery代碼：

現(xiàn)在我們將文件長(zhǎng)度存儲(chǔ)在變量中并對(duì)其進(jìn)行For循環(huán)，以訪問所有圖像。 最后，我們上傳前的多個(gè)圖像預(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

標(biāo)簽: JQuery  FileReader