2017.12.31 JS拖拽本地图片显示

最新推荐文章于 2023-01-30 22:01:36 发布

原创最新推荐文章于 2023-01-30 22:01:36 发布 · 775 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript

学习日记专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用HTML, CSS和JavaScript实现的拖放功能案例。通过拖拽图片元素到指定区域，可以实现图片的重新布局或者文件的上传。文章详细解释了如何通过监听dragstart, dragover, drop等事件，来完成拖放操作。

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);
    }
}