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

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

js

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

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

原文链接:https://www.cnblogs.com/xiaozhou223/p/11547508.html

最新更新