經過HTML5 FileReader實現上傳圖片預覽功能

原文：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html

 

在上傳圖片到服務器以前，咱們但願能夠預覽一下要上傳的圖片。這個功能能夠經過HTML5 的FileReader()方法來實現。
FileReader是HTML5 File API的一部分。它實現了一種異步文件讀取機制。能夠把FileReader想象爲XMLHttpRequest，區別只是它讀取的是文件系統，而不是遠程服務器。爲了讀取文件中的數據，FileReader提供了以下幾個方法。
readAsText(file,encoding)：以純文本的方式讀取文件，將讀取到的文件保存到result屬性中。
readAsDataURL(file)：讀取文件並將文件以數據URI的形式保存在result屬性中。
readAsBinaryString(file)：讀取文件並將一個字符串保存在result屬性中，字符串中的每一個字符表示一個字節。
readAsArrayBuffer(file)：讀取文件並將一個包含文件內容的ArrayBuffer保存在result屬性中。
經過readAsDataURL(file)方法，咱們就能夠將讀取到的圖片數據以URI的方式顯示在頁面中。
例以下面是一個上傳圖片預覽的例子：
選擇文件

上面例子中的HTML代碼以下：
<div id="wrapper">       
  <input id="fileUpload" type="file" /><br />
  <div id="image-holder"> </div>
</div>
下面是結合jQuery和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("你的瀏覽器不支持FileReader.");
    }
});
 實現多張圖片預覽效果
先來看看效果，下面是一個能夠預覽多張上傳圖片的例子。
選擇文件

在前面咱們已經能夠預覽一張上傳的圖片。要想實現多張圖片預覽效果，必須在文件上傳標籤中添加multiple屬性，使它能夠選擇多張圖片。
<div id="wrapper">       
  <input id="fileUpload" type="file" multiple /><br />
  <div id="image-holder"> </div>
</div>
而後修改一下上面的jQuery代碼，使用一個循環來遍歷全部要上傳的圖片，最後將它們分別顯示出來。
$("#fileUpload").on('change', function () {
 
   //獲取上傳文件的數量
   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") {
 
           // 循環全部要上傳的圖片
           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("你的瀏覽器不支持FileReader！");
       }
   } else {
       alert("請選擇圖像文件。");
   }
});
HTML5 FileReader 能夠在 Internet Explorer 10+、FireFox,、Chrome 和Opera瀏覽器中正常工做。