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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
vue+Element-ui实现分页效果
Nov 15 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快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
js中生成map对象的方法
2014/01/09 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
python导入pandas具体步骤方法
2019/06/23 Python
python版百度语音识别功能
2019/07/09 Python
python实现加密的方式总结
2020/01/19 Python
Keras设置以及获取权重的实现
2020/06/19 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
毕业生自荐书
2013/12/18 职场文书
项目考察欢迎辞
2014/01/17 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
考试诚信承诺书
2014/05/23 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
戒赌保证书
2015/05/11 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
python函数的两种嵌套方法使用
2022/04/02 Python