javascript头像上传代码实例


Posted in Javascript onSeptember 28, 2019

上传头像:

相关关键词:

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" rel="external nofollow" />
 </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: 0;
 padding: 0;
}
.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: 0;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 z-index: 11;
}
.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 相关文章推荐
给Function做的OOP扩展
May 07 Javascript
IE JS编程需注意的内存释放问题
Jun 23 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
jQuery 选择器详解
Jan 19 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
对layui中的onevent 和event的使用详解
Sep 06 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
微信小程序入门之绘制时钟
Oct 22 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 #Javascript
JavaScript生成随机验证码代码实例
Sep 28 #Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 #Javascript
layui时间控件选择时间范围的实现方法
Sep 28 #Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 #Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 #Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 #Javascript
You might like
用PHP连接Oracle数据库
2006/10/09 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python列表(List)知识点总结
2019/02/18 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
安全月活动总结
2014/05/05 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
六查六看心得体会
2014/10/14 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
餐厅开业活动方案
2019/07/08 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
Pyhton模块和包相关知识总结
2021/05/12 Python
redis实现排行榜功能
2021/05/24 Redis
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers