📷 การอัปโหลดไฟล์พร้อมแสดงตัวอย่างรูปภาพ

👇 ตัวอย่างหน้าตา 👇

👀 สาธิตการใช้งาน

แสดงตัวอย่างรูปภาพ 

  
<form action="upload.php" method="post" enctype="multipart/form-data" onsubmit="event.preventDefault()">
  <p>กรุณาเลือกภาพ:</p>
  <input type="file" accept="image/*" onchange="previewImage(event)">
  <div style="margin-top: 1em;">
    <img id="imagePreview" src="#" alt="ภาพตัวอย่าง" style="display:none; max-width:100%;">
  </div>

  <button type="submit" style="margin-top: 1em;">📤 ส่ง</button>
</form>

<script>
function previewImage(event) {
  const img = document.getElementById("imagePreview");
  img.src = URL.createObjectURL(event.target.files[0]);
  img.style.display = "block";
}
</script>

📌 คำอธิบายและการใช้งานของคุณสมบัติในฟอร์ม

① action="upload.php"
กำหนด URL ปลายทางที่ใช้ในการส่งข้อมูลเมื่อมีการส่งฟอร์ม

<form action="upload.php" ...>

คำอธิบายเพิ่มเติม: คุณสามารถสร้าง upload.php ขึ้นมาเองเพื่อบันทึกรูปภาพลงในเซิร์ฟเวอร์ หรือใช้ URL ของบริการภายนอก เช่น Amazon S3, Google Drive API เป็นต้น



② enctype="multipart/form-data"
ใช้สำหรับกำหนดรูปแบบการเข้ารหัสข้อมูล เมื่อมีการส่งไฟล์ภาพหรือข้อมูลแบบไบนารีผ่านฟอร์ม

<form enctype="multipart/form-data" ...>

หากไม่กำหนด: ไฟล์ภาพอาจไม่สามารถส่งไปยังเซิร์ฟเวอร์ได้อย่างถูกต้อง (ข้อมูลอาจว่างเปล่าหรือใช้งานไม่ได้)



③ onsubmit="event.preventDefault()"
ป้องกันไม่ให้ฟอร์มถูกส่งจริง เหมาะสำหรับการสาธิตหรือการแสดงตัวอย่างเท่านั้น

<form onsubmit="event.preventDefault()" ...>

ในกรณีใช้งานจริง: ควรลบ onsubmit ออก หรือใช้ JavaScript เพื่อเรียก form.submit() อย่างชัดเจน



🧪 ตัวอย่างรวม (เขียนเต็ม)

<form action="upload.php" method="post" enctype="multipart/form-data" onsubmit="event.preventDefault()">

✅ จุดเด่นและประโยชน์ของเทมเพลตนี้

  • แสดงตัวอย่างภาพได้ทันทีเมื่อเลือกไฟล์
  • มอบประสบการณ์ใช้งานที่เข้าใจง่ายให้กับผู้ใช้
  • สามารถเพิ่มลงในอินเทอร์เฟซการอัปโหลดได้ง่าย
  • เหมาะสำหรับพอร์ตโฟลิโอหรือการลงทะเบียนภาพสินค้า
  • โครงสร้างเข้าใจง่ายแม้สำหรับผู้เริ่มต้น JS

🧩 การประยุกต์ใช้งานและวิธีนำไปใช้

ฟังก์ชันแสดงภาพตัวอย่างก่อนอัปโหลดนั้นพบได้ทั่วไปในเว็บไซต์ขายของออนไลน์และหน้าสมัครโปรไฟล์ ช่วยให้ผู้ใช้มีประสบการณ์ที่ดีขึ้น และลดข้อผิดพลาดในการเลือกไฟล์

เทมเพลตนี้ใช้ URL.createObjectURL() เพื่อสร้าง URL ชั่วคราวจากไฟล์ภาพที่เลือกไว้ ทำให้สามารถแสดงภาพตัวอย่างได้ทันทีโดยไม่ต้องอัปโหลดไปยังเซิร์ฟเวอร์

นอกจากนี้ยังใช้ img.style.display = "block" เพื่อควบคุมการแสดงผล โดยจะให้ภาพปรากฏเฉพาะเมื่อมีการเลือกไฟล์แล้วเท่านั้น

หากต้องการเพิ่มการตรวจสอบ เช่น จำกัดขนาดหรือนามสกุลไฟล์ สามารถใช้ event.target.files[0].type และ .size เพื่อเขียนเงื่อนไขเพิ่มเติมได้

การเข้าใจพื้นฐานนี้จะช่วยให้สามารถต่อยอดไปยังการทำพรีวิวหลายภาพ หรือการลากไฟล์เพื่ออัปโหลดในอนาคตได้ง่ายขึ้น