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 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
详解如何较好的使用js
Dec 16 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
实例讲解PHP表单处理
2019/02/15 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
浅谈Python的异常处理
2016/06/19 Python
浅谈python迭代器
2017/11/08 Python
python中logging包的使用总结
2018/02/28 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
python实现任意位置文件分割的实例
2018/12/14 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
Python可以实现栈的结构吗
2020/05/27 Python
python redis存入字典序列化存储教程
2020/07/16 Python
python 元组和列表的区别
2020/12/30 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
给物业的表扬信
2014/01/21 职场文书
爱情保证书范文
2014/02/01 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
上海世博会口号
2014/06/19 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
先进事迹演讲稿
2014/09/01 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
西游记读书笔记
2015/06/25 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL