jQuery實現(xiàn)上傳圖片前預(yù)覽效果功能

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:33:35

jQuery實現(xiàn)上傳圖片前預(yù)覽效果功能

jQuery實現(xiàn)上傳圖片前預(yù)覽效果功能:網(wǎng)上很多代碼實現(xiàn)了上傳圖片這個功能，但不支持實時預(yù)覽圖片，下面實現(xiàn)了上傳圖片前預(yù)覽效果功能，具體如下效果如圖：代碼如下： <!doctype html> <html> <head> <meta charset=utf-8> <titl

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀jQuery實現(xiàn)上傳圖片前預(yù)覽效果功能:網(wǎng)上很多代碼實現(xiàn)了上傳圖片這個功能，但不支持實時預(yù)覽圖片，下面實現(xiàn)了上傳圖片前預(yù)覽效果功能，具體如下效果如圖：代碼如下： <!doctype html> <html> <head> <meta charset=utf-8> <titl

網(wǎng)上很多代碼實現(xiàn)了上傳圖片這個功能，但不支持實時預(yù)覽圖片，下面實現(xiàn)了上傳圖片前預(yù)覽效果功能，具體如下

效果如圖：

代碼如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery上傳圖片之前可以預(yù)覽效果</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<input id="file" ;="" onchange="c()" type="file"><br>
<img src="" id="show" width="200"><script>
function c () {
 var r= new FileReader();
 f=document.getElementById('file').files[0];
 
 r.readAsDataURL(f);
 r.onload=function (e) {
 document.getElementById('show').src=this.result;
 };
}</script>
</body>
</html>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

jQuery實現(xiàn)上傳圖片前預(yù)覽效果功能

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：圖片上傳預(yù)覽圖預(yù)覽圖片

熱門焦點

jQuery實現(xiàn)上傳圖片前預(yù)覽效果功能

jQuery實現(xiàn)上傳圖片前預(yù)覽效果功能

jQuery實現(xiàn)上傳圖片前預(yù)覽效果功能

最新推薦

猜你喜歡

熱門推薦