జావాస్క్రిప్ట్ మరియు HTML ఉపయోగించి చిత్రాన్ని అప్‌లోడ్ చేసే పద్ధతిని ఈ వ్రాత-అప్ ప్రదర్శిస్తుంది.
JavaScript/HTML ఉపయోగించి ఒక సాధారణ చిత్రాన్ని ఎలా అప్‌లోడ్ చేయాలి?
జావాస్క్రిప్ట్‌ని ఉపయోగించి ఒక సాధారణ చిత్రాన్ని అప్‌లోడ్ చేయడానికి, ముందుగా, మేము HTML పేజీలో ఇమేజ్ ట్యాగ్‌ని జోడిస్తాము, ఆపై వెబ్ పేజీలో చిత్రాన్ని లోడ్ చేయడానికి మరియు ఎంచుకోవడానికి జావాస్క్రిప్ట్ కోడ్‌ని ఉపయోగిస్తాము.
ఆచరణాత్మక చిక్కుల కోసం, పేర్కొన్న సూచనలను ప్రయత్నించండి.
ఉదాహరణ
అన్నింటిలో మొదటిది, ఇచ్చిన సూచనలను అనుసరించండి:
- చొప్పించు ' <ఇన్పుట్> ” మూలకం మరియు ఇన్పుట్ రకాన్ని ఇలా పేర్కొనండి ఫైల్ ”.
- ఈ “ఫైల్” రకం ఫైల్-ఎంపికలోని ఫీల్డ్‌ని నిర్ణయిస్తుంది మరియు “ బ్రౌజ్ చేయండి ” ఫైళ్లను అప్‌లోడ్ చేయడానికి బటన్.
- '
” ట్యాగ్ లైన్ బ్రేక్‌ను ఇన్సర్ట్ చేస్తుంది. - ఆపై, ''ని చొప్పించండి
HTML ట్యాగ్ చేసి, జోడించు id 'ఒక నిర్దిష్ట పేరుతో ప్రత్యేక ఐడిని పేర్కొనడానికి లక్షణం.
- ' src మీడియా ఫైల్ యొక్క URLని జోడించడానికి ఉపయోగించే లక్షణం:
< br >
< img id = 'నా చిత్రం' src = '#' >
ఫైల్ ఎంపిక సృష్టించబడిందని గమనించవచ్చు మరియు అది ఇన్‌పుట్‌ని అంగీకరించిన తర్వాత మాత్రమే చిత్రం పేరును ప్రదర్శించగలదు:
ఇప్పుడు, లోపల ' <స్క్రిప్ట్> ” ట్యాగ్, కింది కోడ్‌ని ఉపయోగించండి:
< స్క్రిప్ట్ >
కిటికీ. addEventListener ( 'లోడ్' , ఫంక్షన్ ( ) {
పత్రం. querySelector ( 'ఇన్పుట్[type='file']' ) . addEventListener ( 'మార్పు' , ఫంక్షన్ ( ) {
ఉంటే ( ఇది . ఫైళ్లు && ఇది . ఫైళ్లు [ 0 ] ) {
varimg = పత్రం. getElementById ( 'img_content' ) ;
img ఆన్‌లోడ్ = ( ) => {
URL . revokeObjectURL ( img src ) ;
}
img src = URL . createObjectURL ( ఇది . ఫైళ్లు [ 0 ] ) ;
}
} ) ;
} ) ;
స్క్రిప్ట్ >
పై కోడ్ స్నిప్పెట్‌లో:
- ' addEventListener() ”జావాస్క్రిప్ట్ పద్ధతి ఒక మూలకానికి నిర్వచించిన ఈవెంట్ హ్యాండ్లర్‌ను ఇన్సర్ట్ చేయడానికి లేదా అటాచ్ చేయడానికి అనుమతిస్తుంది.
- ' క్వెరీ సెలెక్టర్() ” అనేది నిర్దిష్ట సెలెక్టర్‌తో లింక్ చేసే నిర్దిష్ట డాక్యుమెంట్‌లోని మొదటి అంశాన్ని తిరిగి ఇవ్వడానికి ఉపయోగించే పద్ధతి.
- ' getElementById() నిర్వచించిన ఐడిని ఉపయోగించడం ద్వారా మూలకాన్ని పొందడానికి ” పద్ధతి ఉపయోగించబడుతుంది. ఆ ప్రయోజనం కోసం, యొక్క విలువ పరామితిగా పంపబడుతుంది.
- ' revokeObjectURL() ” URLని ఉపయోగించడం ద్వారా సృష్టించబడిన ఇప్పటికే ఉన్న ఆబ్జెక్ట్ URLని విడుదల చేస్తుంది. అలా చేయడానికి, చిత్రం యొక్క URL ఈ పద్ధతి యొక్క పారామీటర్‌గా పంపబడుతుంది.
- ' createObjectURL() ” అనేది జావాస్క్రిప్ట్ స్టాటిక్ పద్ధతి, ఇది ఒక నిర్దిష్ట స్ట్రింగ్‌లో పారామీటర్‌లో పాస్ చేసిన వస్తువును సూచించే URLని కలిగి ఉంటుంది.
అవుట్‌పుట్
మేము ఒక సాధారణ చిత్రాన్ని విజయవంతంగా అప్‌లోడ్ చేసినట్లు గమనించవచ్చు.
ముగింపు
జావాస్క్రిప్ట్ ఉపయోగించి సాధారణ చిత్రాన్ని అప్‌లోడ్ చేయడానికి, ' addEventListener() ”ఎలిమెంట్‌కు నిర్వచించిన ఈవెంట్ హ్యాండ్లర్‌ను ఇన్సర్ట్ చేయడానికి లేదా అటాచ్ చేయడానికి అనుమతించే పద్ధతి. అప్పుడు, id ద్వారా నిర్వచించబడిన మూలకాన్ని యాక్సెస్ చేయండి మరియు 'ని ఉపయోగించండి revokeObjectURL() 'మరియు' createObjectURL() ” పద్ధతులు. ఈ పోస్ట్ JavaScript/HTMLని ఉపయోగించి సాధారణ ఇమేజ్ అప్‌లోడ్ పద్ధతిని పేర్కొంది.