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

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

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

先給大家展示下效果圖：

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("請上傳jpg或png格式的圖片！");
     return false;
    }else{
     img.attr('src',url);
     img.css({'opacity':'1'});
    }
   });
  });
 }();

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

您可能感興趣的文章:

相關(guān)文章

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