選擇圖片後顯示縮略圖（自動生成縮略圖）

時間 2019-12-08

標籤選擇圖片顯示縮略自動生成简体版

原文原文鏈接

參考：使用drop實現點擊和拖放選擇/上傳文件

下面是完整代碼，看註釋：html

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。