這篇文章主要介紹了js如何實(shí)現(xiàn)前端圖片上傳即時(shí)預(yù)覽功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括謝家集網(wǎng)站建設(shè)、謝家集網(wǎng)站制作、謝家集網(wǎng)頁制作以及謝家集網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，謝家集網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到謝家集省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

js的作用是什么

1、能夠嵌入動(dòng)態(tài)文本于HTML頁面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

現(xiàn)在，在實(shí)現(xiàn)前端圖片即時(shí)預(yù)覽，可以說是一件很簡(jiǎn)單的事情了。

我們只需要用file對(duì)象和FileReader對(duì)象，既可以輕松實(shí)現(xiàn)，無需下載類庫。

HTML代碼

先來說說input，input這個(gè)元素，具有一個(gè)files屬性，該屬性是一個(gè)filelist對(duì)象，是file對(duì)象的集合。

你可以通過input.files[0]的語法形式拿到這個(gè)file對(duì)象，不過遺憾的是，這個(gè)對(duì)象僅僅包含了用戶選擇的文件的相關(guān)信息，如文件名，大小，類型，最后修改時(shí)間等，并不直接提供文件的數(shù)據(jù)。

程序員只能通過這些信息對(duì)用戶選擇的文件進(jìn)行一些限制。

所以，我們要使用另一個(gè)對(duì)象FileReader來讀取到用戶選擇的文件的數(shù)據(jù)

我們初始化一個(gè)FileReader對(duì)象

var x=new FileReader;

這是一個(gè)初始化完成的FileReader對(duì)象具有的一些屬性和支持的事件

類似于Ajax，F(xiàn)ileReader提供了readyState來查看讀取的狀態(tài)，不過并沒有什么卵用

因?yàn)镕ileReader還提供了onloadend這樣的事件，來處理數(shù)據(jù)讀取完成后該干些什么，onprogress是最有趣的，只要在讀取數(shù)據(jù)，那么這個(gè)事件會(huì)被不停的觸發(fā)，可以實(shí)現(xiàn)那種進(jìn)度條效果。

還有一個(gè)極其重要的屬性result，初始化完成時(shí)，該值是null，當(dāng)讀取數(shù)據(jù)后，該值就是所獲得的數(shù)據(jù)。

接下來，我們就可以使用這個(gè)對(duì)象讀取用戶選擇的圖片了，沒有錯(cuò)就是這么簡(jiǎn)單

當(dāng)用戶選擇了某一個(gè)文件時(shí)，就會(huì)在input上觸發(fā)change事件，這意味著我們可以開始讀取數(shù)據(jù)了

 document.forms[0].elements[0].onchange=function(){
  x.readAsDataURL(this.files[0]);
 }

readASDateURL這個(gè)方法，可以讀取一個(gè)file對(duì)象，并把數(shù)據(jù)以base64的格式填充到FileReader對(duì)象中的result屬性中去。

當(dāng)數(shù)據(jù)讀取完畢，就會(huì)觸發(fā)onloadend事件，在這個(gè)事件中，就可以把數(shù)據(jù)填到img標(biāo)簽中去

x.onloadend=function(){
  document.images[0].src=this.result;
 }

 完整版代碼

 


 var x=new FileReader;
 document.forms[0].elements[0].onchange=function(){
  x.readAsDataURL(this.files[0]);
 }
 x.onloadend=function(){
  document.images[0].src=this.result;
 }

當(dāng)然，這里只是一個(gè)小小的Demo，僅僅實(shí)現(xiàn)了本地預(yù)覽，拋磚引玉，你還可以在此基礎(chǔ)上輕松實(shí)現(xiàn)對(duì)上傳文件的一些判斷和限制，或者是UI上的提升。

FileReader的能力并不止步于此，不僅僅有readASDataURL這種方法。 

不僅是圖片，音樂，視頻都可以實(shí)現(xiàn)對(duì)于的本地預(yù)覽，只要把result屬性的值，賦值給對(duì)應(yīng)的audio或video標(biāo)簽的src屬性即可，不過因?yàn)閮?nèi)存限制，讀取視頻往往失敗。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js如何實(shí)現(xiàn)前端圖片上傳即時(shí)預(yù)覽功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站建設(shè)公司香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞名稱：js如何實(shí)現(xiàn)前端圖片上傳即時(shí)預(yù)覽功能-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://weahome.cn/article/ceejic.html