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: ...
随机推荐
- handler四元素
Looper 一个线程可以产生一个Looper对象,由它来管理此线程里的MessageQueue(消息队列). 我们知道一个线程是一段可执行的代码,当可执行代码执行完成后,线程生命周期便会终止,线程就 ...
- python设计模式-命令模式
命令模式就是对命令的封装.所谓封装命令,就是将一系列操作封装到命令类中,并且命令类只需要对外公开一个执行方法execute,调用此命令的对象只需要执行命令的execute方法就可以完成所有的操作.这样 ...
- Linux系统管理_主题02 ：管好文件（1）_2.2 列出文件和文件属性_chmod_ls
用户(user)是能够获取系统资源的权限的集合.Linux 中的用户可 以分为三类: 1. 根用户(root):具有系统全部权限的用户: 2. 普通用户:其使用系统的权限受到一定限制: 3. 系统 ...
- Delphi使用TADOQuery的RowsAffected属性时需要注意的一个点
测试环境是:Delphi 6.Oracle.PLSQL 先创建一个模拟测试的数据表,并且添加几条模拟的数据 create table practice(uno varchar(8), uname va ...
- 一些常用的java书籍的适看范围
一些常用的java书籍的适看范围 Java三本经典的书: 1.Java核心技术书籍:适合查阅,遇到某个问题不清楚了,可以来此求证. 2.Effective Java:对java底层的一些涉及内容,书 ...
- 【转】java获取当前年、月、日 、小时 、分钟、 秒、 毫秒
public class Test { /** * 英文简写(默认)如:2010-12-01 */ public static String FORMAT_SHORT = "yyyy-MM- ...
- java 与 c# 3des 加解密
java 与 c# 3des 加解密 主要差异如下: 1. 对于待加密解密的数据,各自的填充模式不一样 C#的模式有:ANSIX923.ISO10126.None.PKCS7.Zero,而Jav ...
- MySQL数据操作语句精解
用于操作数据库的SQL一般分为两种,一种是查询语句,也就是我们所说的SELECT语句,另外一种就是更新语句,也叫做数据操作语句. 言外之意,就是对数据进行修改.在标准的SQL中有3个语句,它们是INS ...
- HTML5 DOM 新增数据类型
HTML5 DOM 新增数据类型 前言 相对于HTML4当中的DOM,在HTML5中的DOM,新增了很多复杂数据类型,为实际的应用提供了便捷的操作. 在HTML5 DOM中,新增了如下的内容: HTM ...
- LeetCode.1160-找到可以由给定字符组成的字符串(Find Words That Can Be Formed by Characters)
这是小川的第411次更新,第443篇原创 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第262题(顺位题号是1160).你会得到一个字符串单词数组和一个字符串chars.如果字符串可 ...