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

更新時(shí)間：2017年08月02日 08:49:40 作者：split

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)前端圖片即時(shí)預(yù)覽功能，本地預(yù)覽功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

HTML代碼

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

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

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

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

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

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

var x=new FileReader;

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

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

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

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

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

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

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

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

當(dāng)數(shù)據(jù)讀取完畢，就會觸發(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)對上傳文件的一些判斷和限制，或者是UI上的提升。

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