DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript技巧 >> js實現前端圖片上傳即時預覽功能
js實現前端圖片上傳即時預覽功能
編輯:JavaScript技巧     

現在,在實現前端圖片即時預覽,可以說是一件很簡單的事情了。

我們只需要用file對象和FileReader對象,既可以輕松實現,無需下載類庫。

HTML代碼

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

先來說說input,input這個元素,具有一個files屬性,該屬性是一個filelist對象,是file對象的集合。

你可以通過input.files[0]的語法形式拿到這個file對象,不過遺憾的是,這個對象僅僅包含了用戶選擇的文件的相關信息,如文件名,大小,類型,最後修改時間等,並不直接提供文件的數據。

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

所以,我們要使用另一個對象FileReader來讀取到用戶選擇的文件的數據

我們初始化一個FileReader對象

var x=new FileReader;

這是一個初始化完成的FileReader對象具有的一些屬性和支持的事件

類似於Ajax,FileReader提供了readyState來查看讀取的狀態,不過並沒有什麼卵用

因為FileReader還提供了onloadend這樣的事件,來處理數據讀取完成後該干些什麼,onprogress是最有趣的,只要在讀取數據,那麼這個事件會被不停的觸發,可以實現那種進度條效果。

還有一個極其重要的屬性result,初始化完成時,該值是null,當讀取數據後,該值就是所獲得的數據。

接下來,我們就可以使用這個對象讀取用戶選擇的圖片了,沒有錯就是這麼簡單

當用戶選擇了某一個文件時,就會在input上觸發change事件,這意味著我們可以開始讀取數據了

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

readASDateURL這個方法,可以讀取一個file對象,並把數據以base64的格式填充到FileReader對象中的result屬性中去。

當數據讀取完畢,就會觸發onloadend事件,在這個事件中,就可以把數據填到img標簽中去

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>

當然,這裡只是一個小小的Demo,僅僅實現了本地預覽,拋磚引玉,你還可以在此基礎上輕松實現對上傳文件的一些判斷和限制,或者是UI上的提升。

FileReader的能力並不止步於此,不僅僅有readASDataURL這種方法。 

不僅是圖片,音樂,視頻都可以實現對於的本地預覽,只要把result屬性的值,賦值給對應的audio或video標簽的src屬性即可,不過因為內存限制,讀取視頻往往失敗。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved