新聞中心
小編給大家分享一下JavaScript怎么使用FileReader實現圖片上傳預覽效果,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯從2013年創(chuàng)立,先為松原等服務建站,松原等地企業(yè),進行企業(yè)商務咨詢服務。為松原企業(yè)網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。
JavaScript可以做什么
1.可以使網頁具有交互性,例如響應用戶點擊,給用戶提供更好的體驗。 2.可以處理表單,檢驗用戶的輸入,并提供及時反饋節(jié)省用戶時間。 3.可以根據用戶的操作,動態(tài)的創(chuàng)建頁面。 4使用JavaScript可以通過設置cookie存儲在瀏覽器上的一些臨時信息。
FileReader是HTML5 File API的一部分。它實現了一種異步文件讀取機制??梢园袴ileReader想象為XMLHttpRequest,區(qū)別只是它讀取的是文件系統(tǒng),而不是遠程服務器。為了讀取文件中的數據,FileReader提供了如下幾個方法。
readAsText(file,encoding):以純文本的方式讀取文件,將讀取到的文件保存到result屬性中。
readAsDataURL(file):讀取文件并將文件以數據URI的形式保存在result屬性中。
readAsBinaryString(file):讀取文件并將一個字符串保存在result屬性中,字符串中的每個字符表示一個字節(jié)。
readAsArrayBuffer(file):讀取文件并將一個包含文件內容的ArrayBuffer保存在result屬性中。
multiple 屬性表示支持多張圖片
$("#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") { // 循環(huán)所有要上傳的圖片 for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("你的瀏覽器不支持FileReader!"); } } else { alert("請選擇圖像文件。"); } });
FileReader 可以支持 Internet Explorer 10+、FireFox,、Chrome 和Opera瀏覽器。
以上是“JavaScript怎么使用FileReader實現圖片上傳預覽效果”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯行業(yè)資訊頻道!
名稱欄目:JavaScript怎么使用FileReader實現圖片上傳預覽效果
文章出自:http://www.dlmjj.cn/article/ghjeco.html