परिचय
इमेज अपलोड करने से पहले प्रीव्यू करने के लिए, जावास्क्रिप्ट में FileReader API का उपयोग किया जाता है। यह यूज़र द्वारा चुनी गई फ़ाइल को पढ़ता है और डेटा URL के रूप में उपलब्ध कराता है जिसे img टैग के src में सेट किया जा सकता है।
उदाहरण
<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>इमेज प्रीव्यू</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <form> <input type='file' id="yourImage" accept="image/*" /> <img id="chooseImage" src="#" alt="इमेज प्रीव्यू" style="max-width: 300px; display: none;" /> </form> <script> function readImage(fileInput) { if (fileInput.files && fileInput.files[0]) { const reader = new FileReader(); reader.onload = function(event) { const img = document.getElementById('chooseImage'); img.src = event.target.result; img.style.display = 'block'; }; reader.readAsDataURL(fileInput.files[0]); } } document.getElementById("yourImage").addEventListener("change", function() { readImage(this); }); </script> </body> </html>
आउटपुट
चलाने के निर्देश
उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल का नाम anyName.html (index.html) सेव करें और फ़ाइल पर राइट-क्लिक करके VS कोड एडिटर में Open with Live Server विकल्प चुनें।
मुख्य बिंदु
FileReader.readAsDataURL()- फ़ाइल को base64 डेटा URL के रूप में पढ़ता हैaccept="image/*"- फ़ाइल डायलॉग को केवल इमेज तक सीमित करता हैonloadइवेंट - फ़ाइल पढ़ने के पूरा होने पर ट्रिगर होता है- आधुनिक विकल्प:
URL.createObjectURL(file)- तेज़, लेकिन बाद मेंrevokeObjectURL()की आवश्यकता होती है
सुरक्षा नोट
हमेशा सर्वर-साइड पर भी फ़ाइल प्रकार और आकार को मान्य करें, क्योंकि क्लाइंट-साइड जांच को बायपास किया जा सकता है।
