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插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
jQuery实现影院选座订座效果
Apr 13 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
坏狼php学习 计数器实例代码
2008/06/15 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
初识laravel5
2015/03/02 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
深入浅析Python的类
2018/06/22 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
Django框架models使用group by详解
2020/03/11 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
公司道歉信范文
2014/01/09 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
golang slice元素去重操作
2021/04/30 Golang
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers