แสดงตัวอย่างแบบหลายภาพก่อนอัพโหลด (Upload Multiple Images and display image)

แสดงตัวอย่างแบบหลายภาพก่อนอัพโหลด (Upload Multiple Images and display image)

<!DOCTYPE html>
<html>
    <head>
        <style>
            #result{ display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 0; }
            .thumbnail { width: 150px; }
        </style>
    </head>
    <body>
        <label for="files">Select multiple files</label>
        <input id="files" type="file" multiple="multiple" accept="image/jpeg, image/png, image/jpg">
         <output id="result">

         <script>
             document.querySelector("#files").addEventListener("change", (e) => { //CHANGE EVENT FOR UPLOADING PHOTOS
                 if (window.File && window.FileReader && window.FileList && window.Blob) { //CHECK IF FILE API IS SUPPORTED
                const files = e.target.files; //FILE LIST OBJECT CONTAINING UPLOADED FILES
                 const output = document.querySelector("#result");
                output.innerHTML = "";
                 for (let i = 0; i < files.length; i++) { // LOOP THROUGH THE FILE LIST OBJECT
                     if (!files[i].type.match("image")) continue; // ONLY PHOTOS (SKIP CURRENT ITERATION IF NOT A PHOTO)
                    const picReader = new FileReader(); // RETRIEVE DATA URI
                    picReader.addEventListener("load", function (event) { // LOAD EVENT FOR DISPLAYING PHOTOS
                    const picFile = event.target;
                    const div = document.createElement("div");
                    div.innerHTML = `<img class="thumbnail" src="${picFile.result}" title="${picFile.name}"/>`;
                     output.appendChild(div);
                    });
                picReader.readAsDataURL(files[i]); //READ THE IMAGE
             }
         } else {
                     alert("Your browser does not support File API");
        }
         });
        </script>
    </body>
</html>{codeBox}

ที่มาครูสมชายคัดมาจาก : {getButton} $text={อ้างอิงที่มา} $icon={link} $color={red}

>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.

I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.

THANKS FOR VISITING thumariya.blogspot

Have a nice day!

-------------------------- -------------------------

>>>ลองตรวจสอบหากพบข้อผิดพลาด โปรดแจ้งให้เราทราบโดยแสดงความคิดเห็น

ฉันจะพยายามระดับของฉันให้ดีที่สุดเพื่อแก้ไขปัญหา

ขอบคุณสำหรับการเยี่ยมชม thumariya.blogspot

ขอให้เป็นวันที่ดี!

-------------------------- -------------------------

{fullWidth}

แสดงตัวอย่างแบบหลายภาพก่อนอัพโหลด (Upload Multiple Images and display image)

Thumariya Blog

ฟอร์มรายชื่อติดต่อ