原文地址

https://github.com/visugar/FrontEnd-examples/blob/master/08H5%E6%8B%96%E6%94%BEAPI/drag02.html

代码

HTML

<h3>将图片拖入下面内容框中</h3>
    <hr>
    <div class="img-box">
        <div class="content" id="content"></div>
        <span class="btn" 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"));
        }
    }

}

结果

image.png