上传头像：

　　相关关键词：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. git send-email时报错:Client host rejected: cannot find your hostname 如何处理?

    1. 先找出ip对应的域名 dig +short -x <your ip> 2. 如果第1步没有输出,那么需要将hostname与ip绑定,如:hostname为jello,那么是往/et ...

  2. UI布局属性大全

    第一类:属性值为true或false android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 android:la ...

  3. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-7.接口配置文件自动映射到属性和实体类配置

    笔记 7.接口配置文件自动映射到属性和实体类配置     简介:使用@value注解配置文件自动映射到属性和实体类 1.添加 @Component或者Configuration 注解:        ...

  4. 搭建Kubernetes容器集群管理系统

    1.Kubernetes 概述 Kubernetes 是 Google 开源的容器集群管理系统,基于 Docker 构建一个容器的调度服务,提供资源调度.均衡容灾.服务注册.劢态扩缩容等功能套件. 基 ...

  5. EF中where中日期帅选问题

    结合 SqlFunctions  和 DbFunctions  不能同时用两个DbFunctions queryAble = queryAble.Where(s=> SqlFunctions.D ...

  6. Docker save and load镜像保存

    持久化docker的镜像或容器的方法 Docker的镜像和容器可以有两种方式来导出 docker save #ID or #Name docker export #ID or #Name docker ...

  7. 网卡做bond 导致丢包

    值班中发现一台服务器报到网关丢包,带宽200M. 用  ethtool bond0 查看网卡带宽信息,发现 Speed 为 3100M ,非 1000 的整数倍或10000的整数倍,感觉不对,因为是做 ...

  8. Linux添加日常任务监控文件或日志大小

    1.使用命令"vi/vim xxx.sh"编写shell脚本文件 #!/bin/bash #author yangli # #设置文件检测路径 file_check_path=&q ...

  9. char、varchar、nchar、nvarchar四种类型

    char,nchar是定长,如果没达到指定的长度时将自动以英文空格在其后面填充.优势在于速度较高.varchar,nvarchar属于变长,如果没有达到指定的长度时,不会将自动以英文空格在其后面填充. ...

  10. 一次JDBC支持表情存储的配置过程

    公司的一个项目,一开始没有考虑到内容字段支持表情,有一个接入方的内容含有表情要支持下 项目是基于Springboot的. 方案1先尝试直接配置数据库连接 shardingsphere: datasou ...