JavaScript怎么使用FileReader實(shí)現(xiàn)圖片上傳預(yù)覽效果

小編給大家分享一下JavaScript怎么使用FileReader實(shí)現(xiàn)圖片上傳預(yù)覽效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

JavaScript可以做什么

1.可以使網(wǎng)頁(yè)具有交互性，例如響應(yīng)用戶點(diǎn)擊，給用戶提供更好的體驗(yàn)。 2.可以處理表單，檢驗(yàn)用戶的輸入，并提供及時(shí)反饋節(jié)省用戶時(shí)間。 3.可以根據(jù)用戶的操作，動(dòng)態(tài)的創(chuàng)建頁(yè)面。 4使用JavaScript可以通過(guò)設(shè)置cookie存儲(chǔ)在瀏覽器上的一些臨時(shí)信息。

FileReader是HTML5 File API的一部分。它實(shí)現(xiàn)了一種異步文件讀取機(jī)制?？梢园袴ileReader想象為XMLHttpRequest，區(qū)別只是它讀取的是文件系統(tǒng)，而不是遠(yuǎn)程服務(wù)器。為了讀取文件中的數(shù)據(jù)，F(xiàn)ileReader提供了如下幾個(gè)方法。

• readAsText(file,encoding)：以純文本的方式讀取文件，將讀取到的文件保存到result屬性中。

• readAsDataURL(file)：讀取文件并將文件以數(shù)據(jù)URI的形式保存在result屬性中。

• readAsBinaryString(file)：讀取文件并將一個(gè)字符串保存在result屬性中，字符串中的每個(gè)字符表示一個(gè)字節(jié)。

• readAsArrayBuffer(file)：讀取文件并將一個(gè)包含文件內(nèi)容的ArrayBuffer保存在result屬性中。

• multiple 屬性表示支持多張圖片
  

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

$("#fileUpload").on('change', function () {
 
 //獲取上傳文件的數(shù)量
 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") {
 
   // 循環(huán)所有要上傳的圖片
   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("請(qǐng)選擇圖像文件。");
 }
});

FileReader 可以支持 Internet Explorer 10+、FireFox,、Chrome 和Opera瀏覽器。

以上是“JavaScript怎么使用FileReader實(shí)現(xiàn)圖片上傳預(yù)覽效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！