2017.12.31 JS拖拽本地图片显示

HTML部分

    <div id="img1" class="box1" ondragover="dragOver(event)" ondrop="picture(event)"></div>
    <div id="img2" class="box2" ondragover="dragOver(event)" ondrop="picture(event)"></div>
    <div id="img3" class="box3" ondragover="dragOver(event)" ondrop="picture(event)"></div>
    <div id="img4" class="box4" ondragover="dragOver(event)" ondrop="picture(event)"></div>

CSS样式部分

        div{width: auto;height: 400px;}
        .box1{background-color: lightblue}
        .box2{background-color: lightcoral}
        .box3{background-color: lightcyan}
        .box4{background-color: lightgoldenrodyellow}

JS部分

function dragStart(e) {
    e.dataTransfer.setData("id",e.target.id);//将img的id写入
}

function dragOver(e) {
    e.preventDefault();//阻止拖拽结束的默认行为，会把文件作为链接打开。
}

function drop(e) {
    var id = e.dataTransfer.getData("id");//得到img的id
    var img = document.getElementById(id);//通过id得到img
    var div = document.getElementById(e.target.id);//通过拖拽的目标的id得到要放入的div
    div.appendChild(img);//将img加入div
}

function picture(e) {
    e.preventDefault();//阻止拖拽结束的默认行为，会把文件作为链接打开。
    var id = e.target.id;//得到div的id
    var box = document.getElementById(id);//通过id得到div
    var file = e.dataTransfer.files[0];//得到文件
    var fileReader = new FileReader();
    fileReader.readAsDataURL(file);//将file读为url
    fileReader.onload = function (ev) {//为div添加一个图片，图片路径为拖拽的文件路径
        var img = document.createElement("img");
        img.src = fileReader.result;
        box.appendChild(img);
    }
}