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 Plupload上传插件的使用
Apr 19 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
Jquery Fade用法详解
Nov 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
FCKeditor添加自定义按钮
2008/03/27 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
iOS10推送通知开发教程
2016/09/19 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
jquery实现div阴影效果示例代码
2013/09/16 Javascript
JS中操作JSON总结
2020/12/06 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
js脚本编写简单刷票投票系统
2017/06/27 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
Python 数据结构之堆栈实例代码
2017/01/22 Python
Python中动态创建类实例的方法
2017/03/24 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
一套软件开发工程师笔试题
2015/05/18 面试题
大学学风建设方案
2014/05/04 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
单位工作证明书格式
2014/10/04 职场文书
岁月神偷观后感
2015/06/11 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
简单聊聊Golang中defer预计算参数
2022/03/25 Golang
微信小程序实现轮播图指示器
2022/06/25 Javascript
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技