酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

【云小站】新老客都返现+现金红包+瓜分60万奖池
酷站

js

旗下栏目: php js asp Flex Ajax JSP jquery asp.net C语言 java 正则表达式 微信小程序 Android IOS

javascript头像上传代码教程

来源:互联网搜集 作者:秩名 人气: 发布时间:2019-09-28
本篇文章主要介绍了javascript头像上传代码教程,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

上传头像:

相关关键词:

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;
 }
}

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://www.cnblogs.com/xiaozhou223/p/11547508.html

相关文章

  • js表达式与运算符简单操作教程

    js表达式与运算符简单操作教程

    代码如下: /*** Created by Administrator on 2017/12/14.* 表达式与运算符*///1.基本表达式 加减乘除var a = 4;a = 7/6;var b = (a + 4)/2;console.log(a);console.log(b);console.log(==========);//end//2.比较运算符 == != = =conso......
    02-15
  • JS实现简易计算器代码

    JS实现简易计算器代码

    用JS实现简易计算器,供大家参考,具体内容如下: 首先创建结构和样式 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 titleDocument/title style body{ margin:0......
    02-14
  • JavaScript实现拖拽的代码

    JavaScript实现拖拽的代码

    盒子拖拽运用到的有onmousedown事件,onmousemove事件以及onmouseup事件 1、当鼠标点击下去的时候我们需要获取鼠标所在位置的横纵坐标,然后获取盒子的离页面的横纵方向的距离 2、计算出鼠标相对盒子的距离 3、当鼠标移动的时候,获取鼠......
    02-12
  • JavaScript canvas仿流瀑布效果

    JavaScript canvas仿流瀑布效果

    效果图如下: 在js部分写canvas代码,有详细注释 html部分: 一个canvas元素: canvas id=canvas /canvas css部分: style *{ padding: 0; margin: 0; } canvas{ background-color: #111; } body{ overflow: hidden; }/style script var ......
    02-10
  • JavaScript canvas动画实现时钟的代码

    JavaScript canvas动画实现时钟的代码

    效果图如下: 代码如下: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge title时钟特效/title/headbody canva......
    02-10
  • 微信小程序canvas开发水果老虎机的思路

    微信小程序canvas开发水果老虎机的思路

    效果图: 使用结构还是canvas? 使用模板结构(view)生成水果盘的好处一是用户可自定义产出 n x n 的定制化老虎机,二是容易通过算法样式生成布局,三是通过 wx.selectQueryAll 的方法能够很方便的抓到定位数据。但,问题是动画性能过于孱......
    02-09
  • JavaScript canvas实现雪花随机动态飘落效果

    JavaScript canvas实现雪花随机动态飘落效果

    效果图如下: 代码如下: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 titleDocument/title/headstyle body{ margin: 0; padding: 0; } canvas{ background: #......
    02-08
  • js实现踩五彩块游戏代码

    js实现踩五彩块游戏代码

    代码如下: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge titleDocument/title link rel=stylesheet href=de......
    02-08
  • js实现聊天对话框的代码

    js实现聊天对话框的代码

    代码如下: !DOCTYPE htmlhtml head meta charset=utf-8 title/title style type=text/css .box{ width:300px; height:400px; border:1px solid blue; margin:0 auto; } .inTer{ width:280px; height:280px; border:1px solid deeppink; ......
    02-08
  • JavaScript this的使用方法介绍

    JavaScript this的使用方法介绍

    本文我们介绍下js中this的用法。 由上图可得,默认this指向window,而在node.js中this默认指向global。 由上图可得: 1.原型链为o-MyClass.prototype。 2.函数如果没有明确返回值默认返回this。 由上图可得:call和apply功能相同,不同之......
    02-04

最新更新