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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
js仿淘宝放大镜效果
Dec 28 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边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
javascript高级学习笔记整理
2011/08/14 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
Python线性回归实战分析
2018/02/01 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
Python程序控制语句用法实例分析
2020/01/14 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
以太网Ethernet IEEE802.3
2013/08/05 面试题
C#笔试题
2015/07/14 面试题
企业总经理岗位职责
2014/02/13 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang