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

更新時(shí)間：2017年08月03日 14:30:46 作者：祈澈姑娘

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

網(wǎng)上很多代碼實(shí)現(xiàn)了上傳圖片這個(gè)功能，但不支持實(shí)時(shí)預(yù)覽圖片，下面實(shí)現(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>

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

您可能感興趣的文章:

相關(guān)文章

jQuery給指定的table動(dòng)態(tài)添加刪除行的操作方法
今天在項(xiàng)目中，剛好用到給指定的table添加一行、刪除一行。添加一行，支持在任意行添加一行且可配置的，刪除一行支持動(dòng)態(tài)刪除一行。本文給大家介紹的非常詳細(xì)，一起看看吧
2016-10-10
jQuery常用的一些技巧匯總
本文給大家匯總了一些jQuery常用的方法，都是我們?nèi)粘ｍ?xiàng)目中經(jīng)常會(huì)用到的，附上示例，有需要的小伙伴可以參考下。
2016-03-03
jQuery Html控件基本操作(日常收集整理)
這篇文章主要介紹了jQuery Html控件基本操作(日常收集整理)的相關(guān)資料,需要的朋友可以參考下
2016-03-03
jQuery EasyUI API 中文文檔可調(diào)整尺寸
jQuery EasyUI API 中文文檔可調(diào)整尺寸，學(xué)習(xí)jQuery EasyUI的朋友可以參考下。
2011-09-09
jquery.validate表單驗(yàn)證插件使用方法解析
這篇文章主要為大家詳細(xì)介紹了jquery.validate表單驗(yàn)證插件使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
JQuery以JSON方式提交數(shù)據(jù)到服務(wù)端示例代碼
這篇文章主要介紹了JQuery如何以JSON方式提交數(shù)據(jù)到服務(wù)端,需要的朋友可以參考下
2014-05-05
jquery獲取選中的文本和值的方法
這篇文章主要介紹了jquery獲取選中的文本和值的方法,需要的朋友可以參考下
2014-07-07
jQuery實(shí)現(xiàn)的監(jiān)聽導(dǎo)航滾動(dòng)置頂狀態(tài)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的監(jiān)聽導(dǎo)航滾動(dòng)置頂狀態(tài)功能,涉及基于jQuery的事件響應(yīng)及狀態(tài)監(jiān)聽等相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07
jQuery Pagination Ajax分頁(yè)插件(分頁(yè)切換時(shí)無(wú)刷新與延遲)中文翻譯版
此jQuery插件為Ajax分頁(yè)插件，一次性加載，故分頁(yè)切換時(shí)無(wú)刷新與延遲，如果數(shù)據(jù)量較大不建議用此方法，因?yàn)榧虞d會(huì)比較慢,接下來(lái)詳細(xì)介紹使用方法，感興趣的朋友可以了解下
2013-01-01
jquery操作復(fù)選框checkbox的方法匯總
這篇文章主要介紹了jquery操作復(fù)選框checkbox的方法,實(shí)例匯總了jQuery針對(duì)checkbox進(jìn)行判斷與賦值的各種常用操作技巧,需要的朋友可以參考下
2015-02-02