案例 - 拖拽上传文件,生成缩略图

直接看效果

实现代码

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽上传文件</title>
    <style>
        /* 拖拽容器 */
        .box-container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px dashed black;
            border-radius: 7px;
            width: 200px;
            height: 100px;
        }

        .box1 {
            position: absolute;
            width: 10px;
            height: 50px;
            background: black;
        }

        .box2 {
            position: absolute;
            width: 50px;
            height: 10px;
            background: black;
        }

        .dropbox {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            line-height: 100px;
            text-align: center;
            font-size: 20px;
            font-weight: 900;
            background: rgb(0, 0, 0, 0.3);

        }

        /* 图片容器 */
        .img-container {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            border-radius: 10px;
            box-shadow: 2px 2px 20px 3px black;
            overflow: auto;
        }

        .img-item {
            float: left;
            width: 50px;
            height: 50px;
            margin: 5px;
            border: 1px solid black;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div class="box-container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="dropbox">拖拽上传文件</div>
    </div>
    <br>
    <hr>
    <br>
    <div class="img-container"></div>

</body>
<script>


    let dropbox = document.querySelector('.dropbox')
    dropbox.addEventListener("dragenter", dragenter, false)
    dropbox.addEventListener("dragover", dragover, false)
    dropbox.addEventListener("drop", drop, false)
    dropbox.addEventListener('dragleave', dragleave, false)

    function dragenter(e) {
        e.stopPropagation();
        e.preventDefault();
    }

    // 进入拖拽容器
    function dragover(e) {
        e.stopPropagation();
        e.preventDefault();
        dropbox.style.cssText = `
        opacity: 1;`
    }

    // 离开拖拽容器
    function dragleave(e) {
        e.stopPropagation();
        e.preventDefault();
        dropbox.style.cssText = `
        opacity: 0;`
    }

    // 将拖拽标签放在拖拽容器上(鼠标松开)
    function drop(e) {
        e.stopPropagation();
        e.preventDefault();

        dropbox.style.cssText = `
        opacity: 0;`

        const dt = e.dataTransfer;
        const files = dt.files;
        console.log(dt.files);

        handleFiles(files);
    }

    let imgContainer = document.querySelector('.img-container')
    /** 
     * handleFiles() 处理文件列表
     * 
     * @param files 文件列表
     * @return 
     */
    function handleFiles(files) {
        for (const file of files) {
            if (!file.type.startsWith("image")) {
                continue
            }

            const img = document.createElement('img')
            img.classList.add('img-item')

            // 读取文件流
            const reader = new FileReader()
            reader.onload = (e) => {
                img.src = e.target.result
                imgContainer.appendChild(img)
            }
            reader.readAsDataURL(file)
        }
    }

</script>

</html>
相关推荐
荔枝hu13 分钟前
springboot生成pdf方案之dot/html/图片转pdf三种方式
spring boot·pdf·html
爱电摇的小码农16 分钟前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
一只毛驴1 小时前
面试:SASS/LESS/SCSS区别
css
chao_7891 小时前
CSS表达式——下篇【selenium】
css·python·selenium·算法
土豆12502 小时前
提升CSS开发效率的必备Chrome插件
css·chrome
q567315236 小时前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
灵犀学长7 小时前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
柚子81616 小时前
scroll-marker轮播组件不再难
前端·css
兴趣使然_17 小时前
【笔记】使用 html 创建网址快捷方式
笔记·html·js
凌辰揽月18 小时前
7月10号总结 (1)
前端·css·css3