快捷導(dǎo)航

jQuery點(diǎn)擊頭像上傳并預(yù)覽圖片

更新時(shí)間：2017年02月23日 09:11:38 作者：ithuangjiaqi

要實(shí)現(xiàn)jquery點(diǎn)擊頭像上傳功能，代碼可以分為兩部分html和jq代碼，代碼非常簡(jiǎn)單，需要的朋友參考下

先給大家展示下效果圖：

HTML代碼

<div class="img_show img_show1">
  <img src="img2/img06.jpg" width="103" height="103" alt="">
  <input type="file" class="upfile" accept="*/*">
</div>

jQuery代碼

DS.upfile = function(){
  $('.img_show').each(function(){
   var $this = $(this),
    btn = $this.find('.upfile'),
    img = $this.find('img');
   btn.on('change',function(){
    var file = $(this)[0].files[0],
     imgSrc = $(this)[0].value,
     url = URL.createObjectURL(file);
    if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)){
     alert("請(qǐng)上傳jpg或png格式的圖片！");
     return false;
    }else{
     img.attr('src',url);
     img.css({'opacity':'1'});
    }
   });
  });
 }();

以上所述是小編給大家介紹的jQuery點(diǎn)擊頭像上傳并預(yù)覽圖片，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

jQuery中阻止冒泡事件的方法介紹
這篇文章主要介紹了jQuery中阻止冒泡事件的方法介紹,需要的朋友可以參考下
2014-04-04
jQuery層次選擇器選擇元素使用介紹
層次選擇器:通過DOM元素間的層次關(guān)系獲取元素，其主要的層次關(guān)系包括后代、父子、相鄰、兄弟關(guān)系，通過其中基類關(guān)系可以方便快捷地定位元素，感興趣的朋友可以了解下
2013-04-04
jQuery實(shí)現(xiàn)多按鈕單擊變色
本文給大家分享的是一段使用jQuery實(shí)現(xiàn)的多按鈕單擊之后變色的代碼，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
2014-11-11
jQuery簡(jiǎn)單實(shí)現(xiàn)頁(yè)面元素置頂時(shí)懸浮效果示例
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)頁(yè)面元素置頂時(shí)懸浮效果的方法,涉及jQuery針對(duì)頁(yè)面元素樣式的動(dòng)態(tài)操作技巧,需要的朋友可以參考下
2016-08-08
bootstrap與Jquery UI 按鈕樣式?jīng)_突的解決辦法
這篇文章主要介紹了bootstrap與Jquery UI 按鈕樣式?jīng)_突的解決辦法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
實(shí)現(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼
下面小編就為大家?guī)?lái)一篇實(shí)現(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2016-11-11
jQuery寫的日歷(包括日歷的樣式及功能)
本代碼將實(shí)現(xiàn)以下樣式及功能：日歷標(biāo)題背景色、日歷標(biāo)題字體色、日歷背景色、日歷字體色、假日字體色、背景水印色、是否顯示上月和下月的日期，感興趣的朋友可以了解下哈
2013-04-04
jQuery+HTML5實(shí)現(xiàn)圖片上傳前預(yù)覽效果
這篇文章主要介紹了jQuery+HTML5實(shí)現(xiàn)圖片上傳前預(yù)覽效果,涉及jquery操作圖片動(dòng)態(tài)顯示效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-08-08
jQuery.get、jQuery.getJSON、jQuery.post無(wú)法返回JSON問題的解決方法
在WEB項(xiàng)目中，經(jīng)常會(huì)使用到j(luò)Query進(jìn)行AJAX請(qǐng)求，但是自從使用了.net 3.5以后，以往寫的請(qǐng)求語(yǔ)句就有些小問題了，就是返回的始終是xml,而并不是JSON
2011-07-07
jquery實(shí)現(xiàn)九宮格大轉(zhuǎn)盤抽獎(jiǎng)
jQuery九宮格大轉(zhuǎn)盤抽獎(jiǎng)代碼網(wǎng)頁(yè)特效，點(diǎn)擊抽獎(jiǎng)按鈕開始隨機(jī)抽獎(jiǎng)選擇獎(jiǎng)品，可設(shè)置起點(diǎn)位置、獎(jiǎng)品數(shù)量、轉(zhuǎn)動(dòng)次數(shù)、中獎(jiǎng)位置參數(shù)
2015-11-11