选择图片后显示缩略图（自动生成缩略图）

参考：使用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>

选择图片后显示缩略图（自动生成缩略图）

艾欢欢

引用和评论

canvas绘图模糊处理（高分屏下的canvas绘制）

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合