快捷導(dǎo)航

多種方式實現(xiàn)js圖片預(yù)覽

更新時間：2016年12月12日 10:46:18 作者：獨行俠夢

這篇文章主要為大家詳細(xì)介紹了多種方式實現(xiàn)js圖片預(yù)覽,具有一定的參考價值，感興趣的小伙伴們可以參考一下

先貼代碼，之后完善：

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>js多種方式圖片預(yù)覽-持續(xù)更新</title>
 </head>
 <body>
 <body> 
 <input type="file" id="file" value="選擇" accept="image/*">
 <div style="width:300px;height:300px;border:1px solid #ccc">
 <img id="img_show" src="" />
 </div>

 </body>
 <script type="text/javascript" src="./jquery-3.1.1.min.js"></script>
 <script type="text/javascript">
 //設(shè)置自己的變量存儲區(qū)
 var Util = {
   file : $("#file"),
   image_show:$("#img_show")
 }


 Util.file.onchange=function(f){
  if(this.files[0].type.indexOf('image')<0){
   alert("請選擇圖片文件!");
   return; 
  }

  if(this.files[0].size/1024 > 5*1024){
   alert("圖片過大，請選擇5M以下的文件");
   return;
  }

  if(typeof FileReader=='undefined'){//如果支持,typeOf返回的也是 Function
   alert("您的瀏覽器不支持html5 fileReader請更換瀏覽器重試!");
   return;
  }


  var reader = new FileReader();
  reader.readAsDataURL(this.files[0]);//這里傳的是一個blob ，其實file對象就是繼承自bolob
  reader.onload=function(e){
   console.log(reader.result);//這里拿到的是一個base64編碼后的圖片
   Util.image_show.src=reader.result;
  }

 };

 </script>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

關(guān)于IE瀏覽器以及Firefox下的javascript冒泡事件的響應(yīng)層級
原來是由于IE瀏覽器以及Firefox對于冒泡型事件的支持層次不同造成的。（如對冒泡事件不是很了解可先查詢相關(guān)資料）
2010-10-10
JavaScript 自動完成腳本整理(33個)
所謂的提升用戶體驗,其實就是把所有用戶視為懶鬼,比如JavaScript自動完成(Autocomplete)腳本, 常用于表單,用戶只需輸入一兩個字母,就為你擴展、聯(lián)想、匹配和供君選擇,
2009-10-10
JavaScript讀取XML文件的幾種方法
XML是一種標(biāo)記語言,用于存儲和傳輸數(shù)據(jù),它是從SGML簡化而來的,XML經(jīng)常被用來在不同的應(yīng)用程序之間或同一個應(yīng)用程序的不同部分之間交換數(shù)據(jù),同時還可以用于網(wǎng)絡(luò)應(yīng)用的數(shù)據(jù)配置和信息存儲,在JavaScript中,通常有幾種方法,需要的朋友可以參考下
2025-01-01
微信小程序scroll-view實現(xiàn)左右聯(lián)動
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實現(xiàn)左右聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
ES6 Array常用擴展的應(yīng)用實例分析
這篇文章主要介紹了ES6 Array常用擴展的應(yīng)用,結(jié)合實例形式分析各種常見擴展方法針對Array數(shù)組的轉(zhuǎn)換、遍歷、查找、運算等相關(guān)操作技巧,需要的朋友可以參考下
2019-06-06
js制作支付倒計時頁面
這篇文章主要為大家詳細(xì)介紹了js制作支付倒計時頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
關(guān)于驗證碼在IE中不刷新的快速解決方法
下面小編就為大家?guī)硪黄P(guān)于驗證碼在IE中不刷新的快速解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
JavaScript中?this?的綁定指向規(guī)則
這篇文章主要介紹了JavaScript中?this?的綁定指向規(guī)則，this的指向問題存在各種各樣的，關(guān)于如何綁定指向，下面文章作簡單介紹需要的小伙伴可以參考一下
2022-06-06
js進(jìn)階語法之變量提升、函數(shù)提升以及參數(shù)的命名沖突問題解決
JavaScript代碼在執(zhí)行前會經(jīng)歷一個預(yù)處理階段,這個階段主要涉及變量提升和函數(shù)提升,下面這篇文章主要介紹了js進(jìn)階語法之變量提升、函數(shù)提升以及參數(shù)的命名沖突問題解決的相關(guān)資料,需要的朋友可以參考下
2024-09-09
JavaScript中錯誤正確處理方式小結(jié)你用對了嗎
本文將會討論客戶端JavaScript中的錯誤處理。主要介紹JavaScript中的易犯錯誤、錯誤處理、異步代碼編寫等內(nèi)容。下面就讓我們一起看看如何正確處理JavaScript中的錯誤
2017-10-10