jQuery点击头像上传并预览图片

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

要实现jquery点击头像上传功能，代码可以分为两部分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点击头像上传并预览图片，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

用jQuery模拟页面加载进度条的实现代码
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少，所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢
2011-12-12
jquery实现的判断倒计时是否结束代码
在一些购物网站经常会遇到倒计时的功能，例如某些商品在一定期限内搞活动，下面小编给大家分享一段代码关于jquery实现的判断倒计时是否结束代码，希望对大家有所帮助
2016-02-02
jQuery实现tag便签去重效果的方法
这篇文章主要介绍了jQuery实现tag便签去重效果的方法,较为详细的分析了html页面及js代码的实现技巧,非常具有实用价值,需要的朋友可以参考下
2015-01-01
jQuery+ajax实现批量删除功能完整示例
这篇文章主要介绍了jQuery+ajax实现批量删除功能,结合完整实例形式分析了jQuery+ajax结合bootstrap与layer.js插件实现的批量删除与交互功能相关操作技巧,需要的朋友可以参考下
2019-06-06
jQuery实现提交表单时不提交隐藏div中input的方法
这篇文章主要介绍了jQuery实现提交表单时不提交隐藏div中input的方法,结合实例形式分析了通过设置input的disabled属性实现隐藏input提交的操作技巧,需要的朋友可以参考下
2019-10-10
jQuery插件编写步骤详解
这篇文章主要介绍了jQuery插件编写步骤,详细分析了jQuery实现插件功能的具体步骤与相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2016-06-06
Jquery实现图片左右自动滚动示例
图片左右滚动的效果想必大家都有见到过吧，其实很简单。在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的，感兴趣的朋友可以参考下
2013-09-09
Jquery中的offset()和position()深入剖析
jquery 中有两个获取元素位置的方法offset()和position()，这两个方法之间有什么异同？使用的时候应该注意哪些问题？什么时候使用offset(),什么时候又使用position()呢？
2009-05-05
jQuery插件autocomplete使用详解
这篇文章主要为大家详细介绍了jQuery插件autocomplete使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
jquery select 设置默认选中的示例代码
本篇文章主要是对jquery select 设置默认选中的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02