ดูตัวอย่างรูปภาพก่อนอัพโหลดใน JavaScript

ด้วยเหตุผลด้านความปลอดภัย เบราว์เซอร์จึงไม่อนุญาตให้เข้าถึงเส้นทางของไฟล์รูปภาพที่เลือกผ่านอินพุต เช่น JavaScript ในเบราว์เซอร์จะไม่สามารถเข้าถึงระบบไฟล์ได้ ดังนั้น งานของเราคือดูตัวอย่างไฟล์ภาพที่เลือกผ่านอินพุตก่อนที่เราจะส่งไปยังเซิร์ฟเวอร์ใด ๆ หรือที่อื่น ๆ

วิธีที่ 1:การใช้คลาส URL:

เราสามารถใช้ฟังก์ชัน createObjectURL() ของคลาส URL เพื่อสร้าง url ของรูปภาพที่เลือกโดยอินพุต จากนั้นระบุ url นั้นให้กับแอตทริบิวต์ src ของแท็ก img

ตัวอย่าง

รหัสสำหรับสิ่งนี้จะเป็น −

<img id="preview"/>
<input type="file" accept="image/*" onchange="previewImage(event)">
<script>
   const previewImage = e => {
      const preview = document.getElementById('preview');
      preview.src = URL.createObjectURL(e.target.files[0]);
      preview.onload = () => URL.revokeObjectURL(preview.src);
   };
</script>

วิธีที่ 2:การใช้คลาส FileReader:

เมธอดนี้จะแยกวิเคราะห์ไฟล์ที่ นำเข้ามา จากนั้นจะสร้างสตริงที่มีการแทนค่า base64 ของรูปภาพ

ตัวอย่าง

รหัสสำหรับสิ่งนี้จะเป็น −

<img id="preview"/>
<input type="file" accept="image/*" onchange="previewImage(event)">
<script>
   const previewImage = e => {
      const reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]);
      reader.onload = () => {
         const preview = document.getElementById('preview');
         preview.src = reader.result;
      };
   };
</script>

ผลลัพธ์

ผลลัพธ์สำหรับทั้งสองวิธีจะมีลักษณะดังนี้ -