上传头像：

　　相关关键词：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. document.onselectstart=function(){return false;} 引起的拖动问题

    在网页中拖动时,会引起某些文字或一些内容被选中,导致网页中蓝蓝的一片,视觉效果很差,所以我加了个1.document.onselectstart=function(){return false;}或者 ...

  2. selenium webdriver常用函数

    from selenium import webdriver driver = webdriver.Ie(executable_path = "e:\\IEDriverServer" ...

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

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

  4. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-1.SpringBoot整合微信支付开发在线教育视频站点介绍

    笔记 第一章项目介绍和前期准备 1.SpringBoot整合微信支付开发在线教育视频站点介绍     简介: 课程介绍,和小D课堂在线教育项目搭建开发 1.课程大纲介绍         2.微信支付项 ...

  5. Qt编写自定义控件19-图片背景时钟

    前言 图片背景时钟控件,是全套控件(目前共145个)中唯一的几个贴图的控件,这个背景要是不贴图,会画到猝死,必须用美工做好的图贴图作为背景,此控件以前学C#的时候写过,后面在写Qt控件的过程中把他移植 ...

  6. WdatePicker没有效果怎么办

    1:如果WdatePicker没有效果时间输入框 或报 invalid property:firstDayOfWeek 个错误. 2:网上解决方法有很多,但很多都不规范. 解决方法:重新下载(下载地址 ...

  7. idea 双击选中一个变量，及高亮显示相同的变量

    其实idea有这个功能,只是没有背景颜色,在这里有可能是编辑区的背景颜色和选中变量的背景颜色一样, 所有我们只需要调一下背景颜色就可以了 版本:ideaIU-2018.1.5 1. 到这里就结束啦..

  8. partprobe 和 partx 的用法

    partprobe: 用于重读分区表,当出现删除文件后,出现仍然占用空间.可以partprobe在不重启的情况下重读分区. 将磁盘分区表变化信息通知内核,请求操作系统重新加载分区表. -d 不更新内核 ...

  9. memcached-slab内存管理

    一.Memcache内存分配机制 关于这个机制网上有很多解释的,我个人的总结如下. Page为内存分配的最小单位. Memcached 的内存分配以page为单位,默认情况下一个page是1M,可以通 ...

  10. tcp协议相关概念

    conv 会话IDmtu 最大传输单元mss 最大分片大小state 连接状态(0xFFFFFFFF表示断开连接)snd_una 第一个未确认的包snd_nxt 待发送包的序号rcv_nxt 待接收消 ...