上传头像：

　　相关关键词：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. LC 722. Remove Comments

    Given a C++ program, remove comments from it. The program source is an array where source[i] is the  ...

  2. Mysql Errors

    Mysql Errors Table of Contents 1. ERROR 1044 1.1. 42000 2. ERROR 1045 2.1. 28000 2.1.1. 无登录权限 2.1.2. ...

  3. coursera 视频总是缓冲或者无法观看的解决办法（Windows 和 Linux 系统 环境）

    现在读了一个机器学习方向的博士,虽然这么长时间也没有学明白什么,但是没事的时候也会看看一些书籍和资料,学这个方向的人基本都会看过吴恩达的coursera课程上的机器学习课程,我也是如此,不过交了钱以后 ...

  4. R语言常用包简介

  5. java.lang.RuntimeException: org.dom4j.DocumentException: 1 字节的 UTF-8 序列的字节 1 无效。

    向一个XML文件写入出现异常 解决办法:使用记事本打开该XML文件,另存为,编码选择UTF-8 java.lang.RuntimeException: org.dom4j.DocumentExcept ...

  6. centos7安装redis3.2.5集群

    安装参照     https://blog.csdn.net/mingliangniwo/article/details/54600640  https://blog.csdn.net/u013820 ...

  7. 树莓派实现摄像头监控（使用motion和mjpg-streamer）

    购买raspBerryCarmen,大概20元, 启动树莓派,安装: `sudo apt install motion` 配置/etc/motion/motion.conf, `sudo vim /e ...

  8. 【Linux】部署NTP时间同步服务器

    1. 查看机器的Linux版本 查看集群内所有服务器的linux版本,确保相同,不要跨大版本. [root@bigdata111 ~]# cat /etc/redhat-release CentOS ...

  9. Jmeter接口测试 2=> Jmeter工具的介绍

    第一节 接口测试流程 参数化:EXCEl文件参数化.数据库参数化.直接代码中配置.配置文件 预处理请求(前置处理):对请求的参数进行预处理.准备,如加密数据.组织测试数据 发起请求:httpclien ...

  10. 企业证书发布app到七牛云服务

    ---恢复内容开始--- 最近在做企业证书发布app,从申请企业证书,到测试程序发布到七牛云存储.整了几天终于实现了,整理一下资料. 1.首先,申请企业证书. 到苹果开发网站申请企业证书 https: ...