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

直接看效果

实现代码

<!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>