快捷導(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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)動(dòng)態(tài)刪除LI的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)刪除LI的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-05-05
使用jQuery獲得內(nèi)容以及內(nèi)容的屬性
本文給大家分享的是一則使用jQuery獲得內(nèi)容以及內(nèi)容的屬性的方法和示例，非常實(shí)用，推薦給大家。
2015-02-02
基于Jquery插件實(shí)現(xiàn)跨域異步上傳文件功能
這篇文章主要介紹了基于Jquery插件實(shí)現(xiàn)跨域異步上傳文件功能的相關(guān)資料,需要的朋友可以參考下
2016-04-04
jQuery cookie的公共方法封裝和使用示例
這篇文章主要介紹了jQuery cookie的公共方法封裝和使用,結(jié)合實(shí)例形式詳細(xì)分析了jQuery cookie的設(shè)置、獲取、刪除等方法封裝與使用相關(guān)操作技巧,需要的朋友可以參考下
2020-06-06
根據(jù)Bootstrap Paginator改寫(xiě)的js分頁(yè)插件
本文主要對(duì)根據(jù)Bootstrap Paginator改寫(xiě)的js插件進(jìn)行詳細(xì)介紹，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
讀jQuery之十四（觸發(fā)事件核心方法）
觸發(fā)事件，或稱模擬用戶動(dòng)作。比如點(diǎn)擊，我們可以用代碼去模擬用戶點(diǎn)擊，達(dá)到的效果與真實(shí)的鼠標(biāo)點(diǎn)擊是一樣的。
2011-08-08
jQuery Mobile頁(yè)面返回不需要重新get
jQuery Mobile 是用于創(chuàng)建移動(dòng) Web 應(yīng)用的前端開(kāi)發(fā)框架。這篇文章主要介紹了jQuery Mobile頁(yè)面返回不需要重新get 的相關(guān)資料,需要的朋友可以參考下
2016-04-04
jquery使用iscorll實(shí)現(xiàn)上拉、下拉加載刷新
這篇文章主要為大家詳細(xì)介紹了jquery使用iscorll實(shí)現(xiàn)上拉、下拉加載刷新的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
jquery 緩存問(wèn)題的幾個(gè)解決方法
在IE瀏覽器下，一般的ajax的方法都是cache等于true的，下面有幾個(gè)不錯(cuò)的解決方法，感興趣的朋友可以參考下
2013-11-11
jQuery中outerHeight()方法用法實(shí)例
這篇文章主要介紹了jQuery中outerHeight()方法用法,實(shí)例分析了outerHeight()方法的功能、定義及獲取第一個(gè)匹配元素外部高度的使用技巧,需要的朋友可以參考下
2015-01-01