ใช้ FileReader API อ่านไฟล์ภาพแล้วแสดง Preview ก่อนอัปโหลดจริง
ตัวอย่าง (Vanilla JS - ไม่ต้อง jQuery)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Preview</title>
<style>
#preview { max-width: 300px; max-height: 200px; display: none; }
</style>
</head>
<body>
<input type="file" id="imageInput" accept="image/*" />
<br><br>
<img id="preview" src="#" alt="Preview" />
<script>
const input = document.getElementById('imageInput');
const preview = document.getElementById('preview');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = (event) => {
preview.src = event.target.result;
preview.style.display = 'block';
};
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>
คำอธิบาย
input type="file" accept="image/*"กรองเฉพาะไฟล์ภาพFileReader.readAsDataURL(file)อ่านไฟล์เป็น Base64 Data URL- Event
onloadใส่event.target.resultให้img.src - ไม่ต้องใช้ jQuery ทำได้ด้วย Vanilla JS อย่างสมบูรณ์
ผลลัพธ์
เลือกไฟล์ภาพ → แสดง Preview ทันทีโดยไม่ต้องอัปโหลดเซิร์ฟเวอร์
