জাভাস্ক্রিপ্টে আপলোড করার আগে একটি চিত্রের পূর্বরূপ দেখুন

নিরাপত্তার কারণে ব্রাউজারগুলি একটি ইনপুটের মাধ্যমে নির্বাচিত চিত্র ফাইলের পাথ অ্যাক্সেস করার অনুমতি দেয় না, যেমন ব্রাউজারে জাভাস্ক্রিপ্ট ফাইল সিস্টেমে কোনো অ্যাক্সেস নেই৷ তাই, আমাদের কাজ হল ইনপুট এর মাধ্যমে নির্বাচিত ছবি ফাইলটিকে আমরা যেকোনো সার্ভারে বা অন্য কোথাও পাঠানোর আগে সেটির পূর্বরূপ দেখা৷

পদ্ধতি 1:URL ক্লাস ব্যবহার করা:

আমরা ইনপুট দ্বারা নির্বাচিত ছবির একটি url তৈরি করতে URL ক্লাসের createObjectURL() ফাংশন ব্যবহার করতে পারি এবং তারপর একটি img ট্যাগের src বৈশিষ্ট্যে সেই url প্রদান করতে পারি৷

উদাহরণ

এর জন্য কোড হবে −

<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:ফাইলরিডার ক্লাস ব্যবহার করা:

এই পদ্ধতিটি দ্বারা গৃহীত ফাইলটিকে পার্স করবে এবং তারপরে এটি একটি স্ট্রিং তৈরি করবে যেখানে ছবির একটি 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>

আউটপুট

উভয় পদ্ধতির আউটপুট −