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


Posted in Javascript onFebruary 23, 2017

先给大家展示下效果图:

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

 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点击头像上传并预览图片,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
location.href语句与火狐不兼容的问题
Jul 04 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
vue一步步实现alert功能
Jul 05 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
jQuery事件与动画基础详解
Feb 23 #Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 #Javascript
解析Vue2.0双向绑定实现原理
Feb 23 #Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 #Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 #Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 #Javascript
高效的jQuery代码编写技巧总结
Feb 22 #Javascript
You might like
PHP脚本的10个技巧(8)
2006/10/09 PHP
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
Ref与out有什么不同
2012/11/24 面试题
通息工程毕业生自荐信
2013/10/16 职场文书
创意婚礼策划方案
2014/05/18 职场文书
物流专业自荐信
2014/05/23 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
刑事和解协议书范本
2014/11/19 职场文书
党支部综合考察意见
2015/06/01 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
python缺失值的解决方法总结
2021/06/09 Python
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
java实现对Hadoop的操作
2021/07/01 Java/Android