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: ...
随机推荐
- html里 调整字间距
使用字与字的间距可设置letter-spacing属性实现,例如:1.p{letter-spacing:15px;}即表示<p>这是一段文字</p>标签里的文字间距为15px. ...
- [Distributed ML] Yi WANG's talk
王益,分布式机器学习的践行者,他的足迹值得后来者学习. 膜拜策略: LinkedIn高级分析师王益:大数据时代的理想主义和现实主义(图灵访谈)[心路历程] 分布式机器学习的故事-王益[历史由来] 分布 ...
- Python中使用第三方库xlrd来写入Excel文件示例
Python中使用第三方库xlrd来写入Excel文件示例 这一篇文章就来介绍下,如何来写Excel,写Excel我们需要使用第三方库xlwt,和xlrd一样,xlrd表示read xls,xlwt表 ...
- Linux开机启动过程分析
开机过程指的是从打开计算机电源直到LINUX显示用户登录画面的全过程.分析LINUX开机过程也是深入了解LINUX核心工作原理的一个很好的途径. 启动第一步--加载BIOS 当 你打开计算机电源,计算 ...
- vue/cli 3.0配置NODE_ENV
原文地址 在项目开发中我们需要配置环境变量,开发环境,生产环境和测试环境.在cli 2.0的版本中我们是通过在config文件夹进行配置的,vue/cli 3.0相对简单,只需要在项目根目录创建.en ...
- new URLSearchParams( )用法说明
URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串. 方法:该接口不继承任何属性. URLSearchParams.append() 插入一个指定的键/值对作为新的搜 ...
- htop/dstat/top/ps命令的使用
top命令 显示系统中进程信息 [root@node0 ~]# top top - 09:36:45 up 13:39, 3 users, load average: 0.02, 0.03, 0. ...
- flask钩子函数
@app.context_processor def context_processor(): return {"current_user":"zhiliao" ...
- Laravel从模型中图片的相对路径获取绝对路径
在模型product.php中增加以下方法.数据库图片字段为image.存储的图片相对路径 public function getImageUrlAttribute() { // 如果 image 字 ...
- PTA (Advanced Level)1082.Read Number in Chinese
Given an integer with no more than 9 digits, you are supposed to read it in the traditional Chinese ...