上传头像：

　　相关关键词：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. linux服务之redis

    redis wget http://download.redis.io/releases/redis-4.0.6.tar.gzcd redis-4.0.6makecd src/./redis-serv ...

  2. HttpClient提交数据

    用代码模拟浏览器的行为 * 轻量级的开源的框架 * Android在6.0 23 以后移除了httpclient ,所以开发中用的少了 * 编写步骤: 1. 打开浏览器 2. 输入网址 3. 敲回车 ...

  3. 给php安装openssl扩展

    转自 http://blog.csdn.net/sinat_23678421/article/details/42217971

  4. Java数组(4)：数组实用功能

    Java标准类库的System.arraycopy()方法,及在java.utils.Arrays类中一套用于数组的static方法,都是操纵数组实用功能.下面分别介绍. (1) 数组的复制 (2)  ...

  5. 二叉树实例学习（四）——获取节点的高度函数getHight()

    树T中所有节点深度的最大值称为该树的高度(height),实际上每个节点与其所有子节点都可以看做一颗树,也就是说除了根结点,所有子结点都可以看做是一颗子树,因此每个结点都有树高.在本程序中约定,仅含单 ...

  6. C＃作业系统提示和故障排除

    使用Unity C#作业系统时,请确保遵守以下内容: 不要从作业访问静态数据 从作业访问静态数据会绕过所有安全系统.如果您访问错误的数据,您可能会以意想不到的方式崩溃Unity.例如,访问MonoBe ...

  7. 我们可以从英特尔® SPMD 程序编译器中学到什么？

    英特尔® SPMD 程序编译器俗称为“ISPC”,它流畅地展示了 CPU 多核 SIMD 语言.GPU 计算语言.数据并行 C++ 扩展和嵌入式应用或领域特定计算语言的重要未来发展方向.具体而言,本文 ...

  8. 使用sequelize-auto生成sequelize的Models

    一.全局安装sequelize-auto npm install -g sequelize-auto 二.全局安装对应数据库的驱动,此处使用的是mysql npm install -g mysql 三 ...

  9. PYTHON 100days学习笔记007-2：python数据类型补充(2)

    目录 day007:python数据类型补充(2) 1.Python3 元组 1.1 访问元组 1.2 删除元组 1.3 元组运算符 1.4 元组索引,截取 1.5 元组内置函数 2.python3 ...

  10. SGI STL泛型heap算法分析

    heap性质 heap本质是用一个数组表示的完全二叉树,并且父节点总是大于(或者小于)子节点的值.在STL中用于实现优先队列(priority_queque).堆排序是排序算法中是稳定效率最高的一种. ...