拖拽图片 上传的例子

     div,p,span{
        margin: 0px;
        padding: 0px;
    }
    .dragIn{
        width: 600px;
        height: 200px;
        border: 1px solid #ddd;
    }
    .dragIn p{
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 200px;
    }
    .dragshow{
        margin-top: 20px;
        width: 600px;
        border: 1px solid #ddd;
        padding: 20px;
        box-sizing: border-box;
    }
    .dragshow p{
        text-align: center;
    }
    .uploadImg{
        width: 100px;
        height: 70px;
        display: inline-block;
        margin-left: 15px;
    }
    .uploadImg img{
        width: 100%;
        height: 100%;
    }

<div class="dragIn">
    <span></span>
    <p>把图片拽到此处</p>
</div>
<div class="dragshow">
    <p>暂无图片</p>
</div>


var drag = document.querySelector(".dragIn");
var dragp = drag.querySelector("p");
var dragshow = document.querySelector(".dragshow");

drag.ondragenter = function (){
    dragp.innerHTML = "释放鼠标";
};

drag.ondragover = function (ev){
    var ev = ev || window.event;
    ev.preventDefault();
};

drag.ondragleave = function(){
    dragp.innerHTML = "把图片拽到此处";
};

drag.ondrop = function (ev){
    var ev = ev || window.event;
    var files = ev.dataTransfer.files;
    console.log(files[0].type.indexOf("image"));

    for(var i=0; i<files.length; i++){
        if(files[i].type.indexOf('image') != -1){
            var read = new FileReader();
            read.readAsDataURL(files[i]);
            var filesize = Math.floor((files[i].size)/1024);
            if(filesize>500){
                alert("发图片太大");
                dragp.innerHTML = "把图片拽到此处";
                return false;
            }else {
                read.onload = function () {
                    var wrap = document.createElement("div");
                    wrap.className = "uploadImg";
                    var img = document.createElement("img");
                    img.src = this.result;
                    wrap.appendChild(img);
                    dragshow.querySelector("p")? dragshow.removeChild(dragshow.querySelector("p")) : "";
                    dragshow.appendChild(wrap);
                    dragp.innerHTML = "把图片拽到此处";
                }
            }
        }else{
            alert("不是图片");
        }
    }
    ev.preventDefault();   //阻止默认行为，不阻止的话，图片拽到div中，会在浏览器打开
};