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

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

創(chuàng)新互聯(lián)從2013年創(chuàng)立，先為松原等服務(wù)建站，松原等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為松原企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)標(biāo)題：JavaScript怎么使用FileReader實(shí)現(xiàn)圖片上傳預(yù)覽效果
本文鏈接：http://muchs.cn/article20/ghjeco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、面包屑導(dǎo)航、做網(wǎng)站、網(wǎng)站收錄、云服務(wù)器、建站公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容