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

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

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

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

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

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對象，不過遺憾的是，這個對象僅僅包含了用戶選擇的文件的相關信息，如文件名，大小，類型，最后修改時間等，并不直接提供文件的數(shù)據(jù)。

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

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

我們初始化一個FileReader對象

var x=new FileReader;

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

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

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

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

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

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

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

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

當數(shù)據(jù)讀取完畢，就會觸發(fā)onloadend事件，在這個事件中，就可以把數(shù)據(jù)填到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，僅僅實現(xiàn)了本地預覽，拋磚引玉，你還可以在此基礎上輕松實現(xiàn)對上傳文件的一些判斷和限制，或者是UI上的提升。

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