แสดงตัวอย่างรูปก่อน Upload ภาษา JavaScript

สอนเขียนโค้ดแสดงตัวอย่างรูปก่อน Upload ด้วยภาษา HTML และ JavaScript โดยภาษา HTML จะเป็นส่วนของ input file เพื่ออัปโหลด และภาษา JavaScript เป็นส่วนของการแสดงตัวอย่างรูปก่อน Upload สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง แสดงตัวอย่างรูปก่อน Upload ภาษา JavaScript และ HTML

เลือกรูปภาพ <input type="file" id="upload"><br/>
<br/><img id="image" />

<script>
    upload.onchange = evt => {
        const[img] = upload.files;
        if(img) {
            image.src = URL.createObjectURL(img);
        }
    }
</script>

1. สร้างตัว input file ด้วยภาษา HTML และแท็ก img เพื่อแสดงรูปภาพก่อน Upload กำหนดให้ input file id เท่ากับ upload และ img id เท่ากับ image

2. ฝั่ง JavaScript upload.onchange = evt => เมื่อผู้ใช้งานกดเลือกรูปภาพ โปรแกรมจะเข้าไปทำงานในโค้ดปีกกาดังกล่าว

3. ตัวแปร const[img] เก็บค่าไฟล์ที่จะอัปโหลดด้วยคำสั่ง upload.files

4. แสดงรูปภาพที่แท็ก img id = image ด้วยคำสั่ง image.src = URL.createObjectURL(img)