jquery实现上传图片功能


Posted in jQuery onJune 29, 2020

本文实例为大家分享了jquery实现上传图片功能的具体代码,供大家参考,具体内容如下

jquery实现上传图片功能

代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>点击头像上传图片</title>
<style>
*{
 margin:0;
 padding: 0;
}
div,#avarimgs,#xdaTanFileImg{
 width: 100px;
 height: 100px;
}
div{
 margin:50px auto;
 position: relative;
}
#xdaTanFileImg{
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
}
</style>
</head>
<body>
 <div>
 <input type="file" name="pclogo" id="xdaTanFileImg" onchange="xmTanUploadImg(this)" accept="image/*">
 <img src="/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3787285033,4172246344&fm=26&gp=0.jpg" class="img-circle img-thumbnail img-responsive" id="avarimgs">
 </div>
</body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript"> 
 
if (typeof FileReader == 'undefined') {
 document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
 document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
}
//选择图片,马上预览
 function xmTanUploadImg(obj) {
 console.log(obj)
 var file = obj.files[0];  
 console.log(obj);console.log(file);
 console.log("file.size = " + file.size);
 var reader = new FileReader();
 reader.onloadstart = function (e) {
 console.log("开始读取....");
 }
 reader.onprogress = function (e) {
  console.log("正在读取中....");
 }
 reader.onabort = function (e) {
 console.log("中断读取....");
 }
 reader.onerror = function (e) {
 console.log("读取异常....");
 }
 reader.onload = function (e) {
 console.log("成功读取....");
 var img = document.getElementById("avarimgs");
 img.src = e.target.result;
 //或者 img.src = this.result; //e.target == this
 }
 reader.readAsDataURL(file)
 }
</script>
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jQuery实时统计输入框字数及限制
Jun 24 #jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 #jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 #jQuery
jQuery 移除事件的方法
Jun 20 #jQuery
Jquery ajax书写方法代码实例解析
Jun 12 #jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 #jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 #jQuery
You might like
mysql 全文搜索 技巧
2007/04/27 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
php写的AES加密解密类分享
2014/06/20 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
php取出数组单个值的方法
2018/03/12 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
详解Python中break语句的用法
2015/05/14 Python
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
浅谈Python单向链表的实现
2015/12/24 Python
Python flask框架post接口调用示例
2019/07/03 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
总经理秘书的岗位职责
2013/12/27 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
python 中的@运算符使用
2021/05/26 Python
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
Python正则表达式中flags参数的实例详解
2022/04/01 Python