یہ تحریر جاوا اسکرپٹ اور ایچ ٹی ایم ایل کا استعمال کرتے ہوئے تصویر کو اپ لوڈ کرنے کے طریقہ کار کو ظاہر کرے گی۔
JavaScript/HTML کا استعمال کرتے ہوئے ایک سادہ تصویر کیسے اپ لوڈ کی جائے؟
JavaScript کا استعمال کرتے ہوئے ایک سادہ تصویر اپ لوڈ کرنے کے لیے، پہلے ہم HTML صفحہ میں ایک تصویری ٹیگ شامل کریں گے اور پھر ویب صفحہ میں تصویر کو لوڈ کرنے اور منتخب کرنے کے لیے JavaScript کوڈ کا استعمال کریں گے۔
عملی مضمرات کے لیے، بیان کردہ ہدایات کو آزمائیں۔
مثال
سب سے پہلے، دی گئی ہدایات پر عمل کریں:
- داخل کریں ' عنصر اور ان پٹ کی قسم کی وضاحت کریں بطور ' فائل '
- یہ 'فائل' قسم فائل سلیکٹ میں فیلڈ کا تعین کرتی ہے اور ' براؤز کریں۔ فائلوں کو اپ لوڈ کرنے کے لیے بٹن۔
- '
” ٹیگ لائن بریک داخل کرتا ہے۔ - پھر، ایک داخل کریں ' HTML ٹیگ اور شامل کریں آئی ڈی کسی خاص نام کے ساتھ منفرد آئی ڈی کی وضاحت کرنے کے لیے خصوصیت۔
- ' src میڈیا فائل کا یو آر ایل شامل کرنے کے لیے استعمال کیا جاتا ہے۔
< بی آر >
< img آئی ڈی = 'میری تصویر' src = '#' >
یہ دیکھا جا سکتا ہے کہ ایک فائل کا آپشن بنایا گیا ہے، اور یہ ان پٹ کو قبول کرنے کے بعد ہی تصویر کا نام ظاہر کر سکتا ہے:
اب، اندر ' ٹیگ، درج ذیل کوڈ کو استعمال کریں:
< سکرپٹ >
کھڑکی EventListener شامل کریں۔ ( 'لوڈ' ، فنکشن ( ) {
دستاویز سوال سلیکٹر ( 'input[type='file']' ) . EventListener شامل کریں۔ ( 'تبدیلی' ، فنکشن ( ) {
اگر ( یہ . فائلوں && یہ . فائلوں [ 0 ] ) {
ورمگ = دستاویز getElementById ( 'img_content' ) ;
img لوڈ ہونے پر = ( ) => {
URL . آبجیکٹ URL کو منسوخ کریں۔ ( img src ) ;
}
img src = URL . تخلیق آبجیکٹ یو آر ایل ( یہ . فائلوں [ 0 ] ) ;
}
} ) ;
} ) ;
سکرپٹ >
مندرجہ بالا کوڈ کے ٹکڑوں میں:
- ' AddEventListener() جاوا اسکرپٹ کا طریقہ کسی عنصر میں متعین ایونٹ ہینڈلر کو داخل کرنے یا منسلک کرنے کی اجازت دیتا ہے۔
- ' سوال سلیکٹر() ” ایک ایسا طریقہ ہے جو مخصوص دستاویز میں پہلی آئٹم کو واپس کرنے کے لیے استعمال کیا جاتا ہے جو مخصوص سلیکٹر سے منسلک ہوتا ہے۔
- ' getElementById() ' طریقہ بیان کردہ آئی ڈی کا استعمال کرکے عنصر حاصل کرنے کے لئے استعمال کیا جاتا ہے۔ اس مقصد کے لیے، کی قدر کو پیرامیٹر کے طور پر پاس کیا جاتا ہے۔
- ' منسوخ آبجیکٹ URL() ' یو آر ایل کا استعمال کرتے ہوئے تخلیق کردہ ایک موجودہ آبجیکٹ URL کو جاری کرتا ہے۔ ایسا کرنے کے لیے، تصویر کا URL اس طریقہ کار کے پیرامیٹر کے طور پر پاس کیا جاتا ہے۔
- ' CreateObjectURL() جاوا اسکرپٹ کا جامد طریقہ ہے جو کسی خاص سٹرنگ کو یو آر ایل بناتا ہے جو پیرامیٹر میں پاس کردہ آبجیکٹ کی نمائندگی کرتا ہے۔
آؤٹ پٹ
یہ دیکھا جا سکتا ہے کہ ہم نے کامیابی کے ساتھ ایک سادہ تصویر اپ لوڈ کی ہے۔
نتیجہ
جاوا اسکرپٹ کا استعمال کرتے ہوئے سادہ تصویر اپ لوڈ کرنے کے لیے، ' AddEventListener() ' طریقہ جو کسی عنصر میں متعین ایونٹ ہینڈلر کو داخل کرنے یا منسلک کرنے کی اجازت دیتا ہے۔ پھر، id کے ذریعے متعین عنصر تک رسائی حاصل کریں اور ' منسوخ آبجیکٹ URL() 'اور' CreateObjectURL() 'طریقے. اس پوسٹ میں JavaScript/HTML کا استعمال کرتے ہوئے تصویر اپ لوڈ کرنے کا آسان طریقہ بتایا گیا ہے۔