js如何實(shí)現(xiàn)前端圖片上傳即時(shí)預(yù)覽功能-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括謝家集網(wǎng)站建設(shè)、謝家集網(wǎng)站制作、謝家集網(wǎng)頁(yè)制作以及謝家集網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(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)輻射到謝家集省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

js的作用是什么

1、能夠嵌入動(dòng)態(tài)文本于HTML頁(yè)面。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ù)覽，可以說(shuō)是一件很簡(jiǎn)單的事情了。

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

HTML代碼

<!DOCTYPE html>
<html>
<body>
<img src="">
<form>
 <input type="file" name="image" />
</form>
</body>
</html>

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

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

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

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

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

var x=new FileReader;

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

js如何實(shí)現(xiàn)前端圖片上傳即時(shí)預(yù)覽功能

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

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

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

接下來(lái)，我們就可以使用這個(gè)對(duì)象讀取用戶選擇的圖片了，沒(méi)有錯(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;
 }

 完整版代碼

<!DOCTYPE html>
<html>
<body>
<img src="">
<form>
 <input type="file" name="image" />
</form>
<script type="text/javascript">
 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;
 }
</script>
</body>
</html>

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

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

js如何實(shí)現(xiàn)前端圖片上傳即時(shí)預(yù)覽功能

不僅是圖片，音樂(lè)，視頻都可以實(shí)現(xiàn)對(duì)于的本地預(yù)覽，只要把result屬性的值，賦值給對(duì)應(yīng)的audio或video標(biāo)簽的src屬性即可，不過(guò)因?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í)等著你來(lái)學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站建設(shè)公司香港服務(wù)器、美國(guó)服務(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://muchs.cn/article2/ceejic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站設(shè)計(jì)、關(guān)鍵詞優(yōu)化、面包屑導(dǎo)航、定制開發(fā)、標(biāo)簽優(yōu)化

廣告

聲明：本網(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)

成都網(wǎng)站建設(shè)公司