快捷導(dǎo)航

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

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

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

網(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>

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

您可能感興趣的文章:

相關(guān)文章

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