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实现图片轮播效果
May 08 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 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
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
在html页面中包含共享页面的方法
2008/10/24 Javascript
Ext面向对象开发实践(续)
2008/11/18 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python实现Decorator模式实例代码
2018/02/09 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
用pycharm开发django项目示例代码
2018/10/24 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
学生社团文化节开幕式主持词
2014/03/28 职场文书