javascript头像上传
上传头像：
相关关键词：ondragover（拖动元素在投放区内移动）
ondrop （元素放在投放区触发但是要去处理浏览器默认事件的影响：ondragenter、ondragover）
dataTransfer（它可以保存一项或多项数据、一种或多数数据类型，通过它来传输被拖动的数据，以便在拖拽结束的时候，对数据进行其他的操作）
<!-- html: -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上传头像图片</title>
<link rel="stylesheet" type="text/css" href="css/index01.css" />
</head>
<body>
<div class="container">
<h1>拖动外部图片或单击上传图片</h1>
<div class="main">
<input type="file" name="file" id="file"/>
<img src="img/十字架.png" class="btn">
</div>
</div>
</body>
<script src="js/index01.js"></script>
</html>
/* css样式： */
*{
margin:;
padding:;
}
.container{
width: 50%;
margin: 0 auto;
height: 400px;
padding: 20px;
text-align: center;
}
.main{
width: 200px;
height: 200px;
border: 2px dashed #666;
margin: 20px auto;
position: relative;
}
.main input{
width: 100%;
height: 100%;
opacity:;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index:;
}
.main .btn{
width: 150px;
height: 150px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/* js */
window.onload = function() {
// 获取元素
var file = document.querySelector("#file");
var addImg = document.querySelector(".btn");
var main = document.querySelector(".main");
// 封装上传图片操作
function upload(img) {
// 实例化一个图片对象
var imgFile = new FileReader();
// 获取图片的路径
imgFile.readAsDataURL(img);
imgFile.onload = function(e) {
// 将上传图标设置为当前图片
addImg.src = e.target.result; }
}
/* 1.点击上传图片 */
file.onchange = function(e) {
// 获取上传图片里面的信息
var img = e.target.files[0];
upload(img);
}
/* 2、拖拽上传 */
main.ondragover = function() {
return false;
}
main.ondrop = function(e) {
upload(e.dataTransfer.files[0]);
return false;
}
}
javascript头像上传的更多相关文章
- JavaScript头像上传器的实现
最近做这方面的东西,刚开始准备用一个开源项目:https://github.com/yueyoum/django-upload-avatar 后来发现这个开源组件的原设计者的定制化选项设计略显复杂,发 ...
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)
今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...
- struts 头像上传
java代码: 1 package cn.itcast.nsfw.user.action; import java.io.File; import java.io.IOException; impor ...
- Html5实现头像上传和编辑，保存为Base64的图片过程
一.Html5实现头像上传和编辑 插件地址: html5手机端裁剪图片上传头像代码 本地项目引入注意事项: 1.将html的js搬到外面的js文件中,便于管理 2.图片样式在html都是在页面写死,需 ...
- php头像上传预览
php头像上传带预览: 说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过fo ...
- spring--mvc添加用户及用户头像上传
spring--mvc添加用户及用户头像上传 添加用户步骤: 1.用ajax获取省份信息 2.添加用户 代码:register.jsp <meta http-equiv="Conten ...
- PHP 头像上传
嘻嘻,自从圣诞节过后,就一直懒散,这几天也因为是太过于繁忙的原因,感觉好久都没有出来冒冒泡,诶... 为了生活一直在奋斗,作为一名前端开发工程师,我现在越来越迷茫了,都不知道现在自己到底算什么了? 会 ...
- Yii2.0 集成使用富头像上传编辑器
在开发过程中,我们会用到头像上传的功能.这里给大家推荐一款比较流行的头像上传组件,FullAvatarEditor 2.3(富头像上传编辑器). 实际效果如图所示: 1.下载组件,下载地址:http: ...
随机推荐
- 如何应对POST方式下载文件的接口
jQuery的下载,需要承载一个插件去做 今天遇到一个问题,后台给的接口由于需要前端传入过多的参数,只能接受用post去下载文件.正常情况下第一反应是用xhr对象去发送post请求,结果并没有触发浏览 ...
- 问题解决：fatal error C1083: 无法打开包括文件:No such file or directory
fatal error C1083: 无法打开包括文件:No such file or directory将别的工程直接用VS2010打开出现了该问题,此时必须检查是不是: 1. 如果要引入的这些.h ...
- 一百零三：CMS系统之使用sweetalert提示框优化返回结果
在base模板中引用 在修改密码的js中使用 $(function () { $('#submit').click(function (evnet) { evnet.preventDefault(); ...
- Threadlocal源码分析以及其中WeakReference作用分析
今天在看Spring 3.x企业应用开发实战,第九章 Spring的事务管理,9.2.2节ThreadLocal的接口方法时,书上有提到Threadlocal的简单实现,我就去看了下JDK1.8的Th ...
- PO BAPI "BAPI_PO_CREATE1"
DATA: poheader LIKE bapimepoheader, poheaderx LIKE bapimepoheaderx, poitem LIKE ...
- MySQL时间相关操作
本文主要介绍MySQL使用过程中有关时间处理的相关操作: MySQL时间更新(加上或减去一段时间) MySQL毫秒数和日期之间的转换 一.MySQL时间更新(加上或减去一段时间) 1.1 MySQL时 ...
- HBase管理与监控——内存调优
HMaster 没有处理过重的负载,并且实际的数据服务不经过 HMaster,它的主要任务有2个:一.管理Hbase Table的 DDL操作, 二.region的分配工作,任务不是很艰巨. 但是如果 ...
- Realm学习总结
参考博客: http://www.jianshu.com/p/096bec929f2a http://www.cnblogs.com/ilyy/p/5648051.html 参考的博客介绍很详细,我就 ...
- web系统认证与鉴权中的一些问题
认证鉴权系统的初心: 空间管理: 1.他是谁? 他登陆了没有? 2.他要做什么? 2.1 他要使用什么功能? 他是否有这个功能的权限. 2.2 他要使用这个功能做什么操作? 他是否有这个功能的这个操作 ...
- 启动hive，提示ls: 无法访问/home/software/spark-2.0.1-bin-hadoop2.7/lib/spark-assembly-*.jar: 没有那个文件或目录
原因是:spark升级到spark2以后,原有lib目录下的大JAR包被分散成多个小JAR包,原来的spark-assembly-*.jar已经不存在,所以hive没有办法找到这个JAR包. 解决办法 ...