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 相关文章推荐
JavaScript中的this实例分析
Apr 28 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
js实现简易计算器功能
Oct 18 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
解决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提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
AngularJS语法详解
2015/01/23 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
js电话号码验证方法
2015/09/28 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Python决策树和随机森林算法实例详解
2018/01/30 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
linux安装python修改默认python版本方法
2019/03/31 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python实现像awk一样分割字符串
2020/09/15 Python
人力资源管理专业学生自我评价
2013/11/20 职场文书
办公室文员工作职责
2014/01/31 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
科技之星事迹材料
2014/06/02 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
学校运动会加油词
2015/07/18 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP