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 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 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环境搭建最新方法
2006/09/05 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
php全角字符转换为半角函数
2014/02/07 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
试用php中oci8扩展
2015/06/18 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
python通过smpt发送邮件的方法
2015/04/30 Python
使用python加密自己的密码
2015/08/04 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
python类的实例化问题解决
2019/08/31 Python
python实现查找所有程序的安装信息
2020/02/18 Python
python 的topk算法实例
2020/04/02 Python
django在开发中取消外键约束的实现
2020/05/20 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
.net工程师笔试题
2012/06/09 面试题
构造方法和其他方法的区别
2016/04/26 面试题
挂牌仪式主持词
2014/03/20 职场文书
保护环境建议书300字
2014/05/13 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
2016简单的租房合同范本
2016/03/18 职场文书