जावास्क्रिप्ट में अपलोड होने से पहले एक छवि का पूर्वावलोकन करें

सुरक्षा कारणों से ब्राउज़र इनपुट के माध्यम से चयनित छवि फ़ाइल के पथ तक पहुँचने की अनुमति नहीं देते हैं, अर्थात ब्राउज़र में जावास्क्रिप्ट की फ़ाइल सिस्टम तक कोई पहुँच नहीं है। इसलिए, हमारा कार्य किसी भी सर्वर या कहीं और भेजने से पहले इनपुट के माध्यम से चयनित छवि फ़ाइल का पूर्वावलोकन करना है।

विधि 1:URL वर्ग का उपयोग करना:

हम इनपुट द्वारा चुनी गई छवि का url बनाने के लिए URL वर्ग के createObjectURL () फ़ंक्शन का उपयोग कर सकते हैं और फिर उस url को img टैग की src विशेषता को प्रदान कर सकते हैं।

उदाहरण

इसके लिए कोड होगा -

<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 वर्ग का उपयोग करना:

यह विधि <इनपुट /> द्वारा ली गई फ़ाइल को पार्स करेगी और फिर यह छवि के बेस 64 प्रतिनिधित्व वाली एक स्ट्रिंग बनाएगी।

उदाहरण

इसके लिए कोड होगा -

<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>

आउटपुट

दोनों विधियों के लिए आउटपुट इस तरह दिखेगा -