本篇教程探讨了使用HTML5的拖放功能如何实现将本地的图片的拖放到网上，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

代码

HTML

<h3>将图片拖入下面内容框中</h3>

    <hr>

    <div>

        <div id="content"></div>

        <span id="upload" onclick="upload()">上传图片</span>

    </div>

CSS

.img-box {

    min-width: 500px;

    min-height: 500px;

}

.img-box .content {

    width: 100%;

    min-height: 450px;

    border: 1px dotted orangered;

    border-radius: 5px;

}

.img-box .btn {

    display: block;

    width: 100px;

    height: 30px;

    line-height: 30px;

    text-align: center;

    background: orangered;

    border-radius: 3px;

    color: #fff;

    margin: 5px 0;

    font-size: 14px;

    font-family: "Microsoft YaHei";

    box-shadow: 0 0 2px orange;

    cursor: pointer;

}

JS

window.onload = function() {

    var content = document.getElementById("content");

    // 阻止document对象的默认事件

    document.ondragover = function(e) {

        e.preventDefault();

    };

    // 阻止照片在新窗口中打开

    document.ondrop = function(e) {

        e.preventDefault();

    }

    content.ondragover = function(e) {

        e.preventDefault();

    }

    content.ondrop = function(e) {

        // 获取图片路径

        var imgsFile = e.dataTransfer.files[0];

        //创建一个fileReader对象的实例

        var fs = new FileReader();

        fs.readAsDataURL(imgsFile);

        // 当图片资源加载完成后，将图片显示在content中

        fs.onload = function(e) {

            // 创建图片实例

            var img = new Image();

            img.src = fs.result;

            content.appendChild(img);

        }

    }

};

function upload() {

    var aImg = document.getElementsByTagName('img') || [];

    if (aImg.length <= 0) {

        alert('请将图片拖入内容区！')

    } else {

        for (var i = 0; i < aImg.length; i++) {

            console.log(aImg[i].getAttribute("src"));

        }

    }

}

本文由职坐标整理发布，学习更多的HTML5/CSS3相关知识，请关注职坐标WEB前端HTML5/CSS3频道！