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

﹏ヽ暗。殇╰゛Y 2024-02-19 10:16 45阅读 0赞

**直接看效果**

![5a7053bc57064900b6ba53b700a2d3d8.gif][]

**实现代码**

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

[5a7053bc57064900b6ba53b700a2d3d8.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/0a72126361584effbfd51352a8363661.png