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: ...
随机推荐
- 软件-设计-Adobe-Adobe XD：百科
ylbtech-软件-设计-Adobe-Adobe XD:百科 创建线框.设计.创建原型.展示以及共享适用于 Web.移动设备和语音等的卓越体验 - 以上操作在一款应用程序中即可完成.XD 面向需要进 ...
- eclips注释的快捷键
一 . 注释java或者c++ 代码的快捷键 CTRL + / 二. 注释xml格式的快捷键 注释: CTRL + SHIFT + / 取消注释: CTRL + SHIFT + \
- 执行scripts/mysql_install_db --user=mysql --basedir=/usr/local/mysql --datadir=/data/mysqldb命令时一直报错：
Can't locate Data/Dumper.pm in @INC (@INC contains: /usr/local/lib64/perl5 /usr/local/share/perl5 /u ...
- Python-sympy科学计算与数据处理(求极限及其它功能)
极限 其它功能
- StringJoiner,StringBuffer的一些lamada写法
public String friendlyText(List data) { if(CollectionUtils.isEmpty(data)) { return "[]"; } ...
- python解析模块(ConfigParser)使用方法
python解析模块(ConfigParser)使用方法 很多软件都有配置文件,今天介绍一下python ConfigParser模块解析配置文件的使用方法 测试配置文件test.conf内容如下: ...
- 在DELPHI中动态创建控件以及控件的事件
在DELPHI中我们经常要动态的创建控件以及控件的事件.例如,我们可能想根据程序需要动态的创建一些Tshape组件来创建某个图形,并使得在鼠标移动上去之后可以完成某些操作.这一般需要需要三步: 生成一 ...
- 20190521 - macOS 中显示隐藏文件的快捷键
macOS 中显示隐藏文件,以前总是借助于命令行或第三方软件,其实有一个快捷键: shift + cmmand + .
- Centos7端口映射
开启tomcat后,访问需要加端口号8080才能访问,在不改变tomcat默认端口号的情况下,添加nat的端口映射,将80端口映射到8080端口,即可实现不加8080访问. 向nat表的 PREROU ...
- Django-DRF(1)
一. WEB应用模式 在开发Web应用中,有两种应用模式: 1. 前后端不分离 2. 前后端分离 二. API接口 为了在团队内部形成共识.防止个人习惯差异引起的混乱,我们需要找到一种大家都觉得很好的 ...