सुरक्षा कारणों से ब्राउज़र इनपुट के माध्यम से चुनी गई छवि फ़ाइल के पथ तक पहुंचने की अनुमति नहीं देते, यानी ब्राउज़र में JavaScript की फाइल सिस्टम तक कोई पहुंच नहीं है। इसलिए, हमारा कार्य सर्वर पर या कहीं और भेजने से पहले इनपुट के माध्यम से चुनी गई छवि फ़ाइल का पूर्वावलोकन करना है।
विधि 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 क्लास का उपयोग करना:
यह विधि द्वारा ली गई फ़ाइल को पार्स करेगी और फिर छवि का 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>
आउटपुट
दोनों विधियों के लिए आउटपुट इस तरह दिखेगा:
