เพื่อเหตุผลด้านความปลอดภัย เบราว์เซอร์ไม่อนุญาตให้เข้าถึงพาธของไฟล์ภาพที่เลือกผ่าน input คือ JavaScript ในเบราว์เซอร์ไม่มีสิทธิ์เข้าถึง File System ดังนั้นภารกิจคือแสดงตัวอย่างไฟล์ภาพที่เลือกผ่าน input ก่อนส่งไปเซิร์ฟเวอร์
วิธี 1: ใช้คลาส URL
ใช้ฟังก์ชัน createObjectURL() ของคลาส URL สร้าง URL ของภาพที่ input เลือก แล้วนำ URL นั้นไปใส่ในแอตทริบิวต์ src ของแท็ก img
ตัวอย่าง
วิธี 2: ใช้คลาส FileReader
วิธีนี้จะแปลงไฟล์จาก input แล้วสร้างสตริงที่มีการแทนค่า base64 ของภาพ
ตัวอย่าง
ผลลัพธ์
ผลลัพธ์ทั้งสองวิธีจะเหมือนกัน:
