javascript头像上传

上传头像：

　　相关关键词：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: 0;
    padding: 0;
}
.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: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 11;
}
.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;
    }
}

 

posted @ 2019-09-19 10:50  Mr▪小zhou  阅读(440)  评论(0)  编辑  收藏  举报