挑选图片后显现缩略图（自动天生缩略图）

2024年4月11日 243次阅读 来源: 艾欢欢

参考：
运用drop完成点击和拖放挑选/上传文件

下面是完全代码，看解释：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>显现挑选图片的缩略图</title>
    <style>
        #dropbox {
        width: 400px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        border: 2px dashed #999;
        border-radius: 5px;
        background: #fbfbfb;
        color: #666;
    }

    #preview>img {
        height: 80px;
        margin: 7px;
        border: 1px solid #666;
        border-radius: 4px;
        box-shadow: 3px 3px 3px #bbb;
    }
    #outbox{
        display: inline-block;
        position: relative;
        overflow: hidden;
    }
    #imgUpload{
        position: absolute;
        left: 0px;
        font-size: 60px;
        opacity: 0;
    }
    </style>
</head>

<body>
    <div id="outbox">
        <div id="dropbox">
            <input id="imgUpload" type="file" multiple>
            <span>点击或将单个/多个图片拖放到此处</span>
        </div>
    </div>
    <div id="preview"></div>
    <script>
    var dropbox, imgUpload;

    dropbox = document.getElementById("dropbox");
    dropbox.addEventListener("dragenter", dragenter, false);
    dropbox.addEventListener("dragover", dragover, false);
    dropbox.addEventListener("dragleave", dragleave, false);
    dropbox.addEventListener("drop", drop, false);

    imgUpload = document.getElementById("imgUpload");
    imgUpload.addEventListener("change", readFile, false)

    // 目的进入drop地区
    function dragenter(e) {
        e.stopPropagation();
        e.preventDefault();
        dropbox.style.background = '#666'
    }
    // 目的位于drop地区上方
    function dragover(e) {
        e.stopPropagation();
        e.preventDefault();
    }
    // 目的脱离drop地区
    function dragleave(e) {
        e.stopPropagation();
        e.preventDefault();
        dropbox.style.background = '#fbfbfb';
    }
    // 目的在drop地区被开释/安排（松开鼠标）
    function drop(e) {
        e.stopPropagation();
        e.preventDefault();
        dropbox.style.background = '#fbfbfb';

        var dt = e.dataTransfer;
        var files = dt.files;

        handleFiles(files);
    }
    // 点击上传按钮后的要领
    function readFile() {
        handleFiles(this.files);
    }
    // 显现缩略图的要领
    function handleFiles(files) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var imageType = /^image\//;
            // 自动过滤非图片文件
            if (!imageType.test(file.type)) {
                continue;
            }
            // 建立img对象并加入到页面中
            var img = document.createElement("img");
            preview.appendChild(img);
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = (function (aImg) {
                return function (e) {
                    aImg.src = e.target.result;
                };
            })(img);
        }
    }
    </script>
</body>

</html>
    原文作者：艾欢欢
    原文地址: https://segmentfault.com/a/1190000019306251
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞