上传头像：

　　相关关键词：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" />

    </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:;

    padding:;

}

.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:;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    z-index:;

}

.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头像上传的更多相关文章

  1. JavaScript头像上传器的实现

    最近做这方面的东西,刚开始准备用一个开源项目:https://github.com/yueyoum/django-upload-avatar 后来发现这个开源组件的原设计者的定制化选项设计略显复杂,发 ...

  2. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  3. 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)

    今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...

  4. struts 头像上传

    java代码: 1 package cn.itcast.nsfw.user.action; import java.io.File; import java.io.IOException; impor ...

  5. Html5实现头像上传和编辑，保存为Base64的图片过程

    一.Html5实现头像上传和编辑 插件地址: html5手机端裁剪图片上传头像代码 本地项目引入注意事项: 1.将html的js搬到外面的js文件中,便于管理 2.图片样式在html都是在页面写死,需 ...

  6. php头像上传预览

    php头像上传带预览: 说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过fo ...

  7. spring--mvc添加用户及用户头像上传

    spring--mvc添加用户及用户头像上传 添加用户步骤: 1.用ajax获取省份信息 2.添加用户 代码:register.jsp <meta http-equiv="Conten ...

  8. PHP 头像上传

    嘻嘻,自从圣诞节过后,就一直懒散,这几天也因为是太过于繁忙的原因,感觉好久都没有出来冒冒泡,诶... 为了生活一直在奋斗,作为一名前端开发工程师,我现在越来越迷茫了,都不知道现在自己到底算什么了? 会 ...

  9. Yii2.0 集成使用富头像上传编辑器

    在开发过程中,我们会用到头像上传的功能.这里给大家推荐一款比较流行的头像上传组件,FullAvatarEditor 2.3(富头像上传编辑器). 实际效果如图所示: 1.下载组件,下载地址:http: ...

随机推荐

  1. centos7 安装 ftp 服务及创建 repo源

    安装 ftp 服务 安装和启动服务:# yum install vsftpd# systemctl enable vsftpd# systemctl start vsftpd 配置文件: vi /et ...

  2. manifest节点

    xmlns:android属性——定义命名空间 这个属性定义了这个XML文件所使用的命名空间.如果需要指定特殊的命名空间,就需要手动编写代码,在Android Studio基本格式如下: xmlns: ...

  3. 转 CentOS7使用firewalld打开关闭防火墙与端口

    http://blog.csdn.net/huxu981598436/article/details/54864260 开启端口命令 输入firewall-cmd --query-port=6379/ ...

  4. 一百二十四：CMS系统之首页导航条和代码抽离

    模板抽离 由于前后台的模板有些需要的元素如,js,css是相同的,这里抽离出来做base模板 {% from "common/_macros.html" import static ...

  5. powershell自动添加静态IP

    声明:其中脚本有参考其他作者,由于当时参考仓促,未能把作者一一列出,有机会会再找出原作者文件链接并附上,请见谅 参考: https://ss64.com/nt/netsh.html https://w ...

  6. HDFS文件目录操作代码

    分布式文件系统HDFS中对文件/目录的相关操作代码,整理了一下,大概包括以下部分: 文件夹的新建.删除.重命名 文件夹中子文件和目录的统计 文件的新建及显示文件内容 文件在local和remote间的 ...

  7. HBase管理与监控——彻底删除HBase数据

    1.hadoop的bin目录下,执行命令以下命令清除Hbase数据 hadoop fs -rm -r /hbase 2.连接ZK,执行以下命令清除Hbase数据 rmr /hbase 3.重启ZK.重 ...

  8. Linux0.11学习

    Linux 0.11虽然不是什么“珠穆朗玛峰”,但它肯定还是“华山”或“泰山”.虽然有路但你还是需要最基本的努力和花费一定的代价才能“攀登”上去.1. PC兼容机硬件工作原理(比如8259A,8253 ...

  9. koa2中间件

    在我看来,前端框架的中间件的思想来源于传统后端的切面编程(AOP)思想,比如我们常见的身份校验(JWT). axios的拦截器也是基于这种程序设计模式的. 在koa中,实际上是由一个数组对象来保存所有 ...

  10. Springboot Rabbitmq 使用Jackson2JsonMessageConverter 消息传递后转对象

    Springboot为了应对高并发,接入了消息队列Rabbitmq,第一版验证时使用简单消费队列: //发送端 AbstractOrder order =new Order(); rabbitmqTe ...