यह राइट-अप जावास्क्रिप्ट और HTML का उपयोग करके इमेज अपलोड करने की विधि प्रदर्शित करेगा।
जावास्क्रिप्ट/एचटीएमएल का उपयोग करके एक साधारण छवि कैसे अपलोड करें?
जावास्क्रिप्ट का उपयोग करके एक साधारण छवि अपलोड करने के लिए, पहले हम HTML पृष्ठ में एक छवि टैग जोड़ेंगे और फिर वेब पेज में छवि को लोड करने और चुनने के लिए जावास्क्रिप्ट कोड का उपयोग करेंगे।
व्यावहारिक प्रभाव के लिए, बताए गए निर्देशों का प्रयास करें।
उदाहरण
सबसे पहले, दिए गए निर्देशों का पालन करें:
- प्रवेश कराएं ' <इनपुट> 'तत्व और इनपुट के प्रकार को' के रूप में निर्दिष्ट करें फ़ाइल ”।
- यह 'फ़ाइल' प्रकार फ़ाइल-चयन में फ़ील्ड को निर्धारित करता है और ' ब्राउज़ 'फ़ाइलें अपलोड करने के लिए बटन।
- '
” टैग एक पंक्ति विराम सम्मिलित करता है। - फिर, 'डालें'
'HTML टैग और जोड़ें' पहचान ” विशेषता एक विशेष नाम के साथ अद्वितीय आईडी निर्दिष्ट करने के लिए।
- ' स्रोत मीडिया फ़ाइल का URL जोड़ने के लिए उपयोग की जाने वाली विशेषता:
< बीआर >
< आईएमजी आईडी = 'मेरी छवि' स्रोत = '#' >
यह देखा जा सकता है कि एक फ़ाइल विकल्प बनाया गया है, और यह इनपुट स्वीकार करने के बाद ही छवि नाम प्रदर्शित कर सकता है:
अब, अंदर ' <स्क्रिप्ट> ” टैग, निम्नलिखित कोड का उपयोग करें:
< लिखी हुई कहानी >
खिड़की। addEventListener ( 'भार' , समारोह ( ) {
दस्तावेज़। querySelector ( 'इनपुट [प्रकार = 'फ़ाइल']' ) . addEventListener ( 'परिवर्तन' , समारोह ( ) {
अगर ( यह . फ़ाइलें && यह . फ़ाइलें [ 0 ] ) {
varimg = दस्तावेज़। getElementById ( 'img_content' ) ;
img. लदाई पर = ( ) => {
यूआरएल . रिवोकऑब्जेक्टURL ( img. स्रोत ) ;
}
img. स्रोत = यूआरएल . createObjectURL ( यह . फ़ाइलें [ 0 ] ) ;
}
} ) ;
} ) ;
लिखी हुई कहानी >
उपरोक्त कोड स्निपेट में:
- ' ऐडइवेंट लिस्टनर () “जावास्क्रिप्ट विधि एक परिभाषित ईवेंट हैंडलर को एक तत्व में सम्मिलित करने या संलग्न करने की अनुमति देती है।
- ' क्वेरी चयनकर्ता () ” एक विधि है जिसका उपयोग किसी विशेष दस्तावेज़ में पहले आइटम को वापस करने के लिए किया जाता है जो विशेष चयनकर्ता के साथ लिंक करता है।
- ' getElementById () परिभाषित आईडी का उपयोग करके तत्व प्राप्त करने के लिए विधि का उपयोग किया जाता है। उस उद्देश्य के लिए, का मान पैरामीटर के रूप में पारित किया जाता है।
- ' रिवोकऑब्जेक्टURL() ” URL का उपयोग करके बनाए गए मौजूदा ऑब्जेक्ट URL को रिलीज़ करता है। ऐसा करने के लिए, इमेज का URL इस विधि के पैरामीटर के रूप में पास किया जाता है।
- ' createObjectURL () ” एक जावास्क्रिप्ट स्टैटिक मेथड है जो किसी विशेष स्ट्रिंग को एक URL बनाता है जो पैरामीटर में पास की गई वस्तु का प्रतिनिधित्व करता है।
उत्पादन
यह देखा जा सकता है कि हमने एक सरल छवि सफलतापूर्वक अपलोड कर दी है।
निष्कर्ष
जावास्क्रिप्ट का उपयोग करके सरल छवि अपलोड करने के लिए, 'का उपयोग करें' ऐडइवेंट लिस्टनर () ” विधि जो किसी परिभाषित ईवेंट हैंडलर को किसी तत्व में सम्मिलित करने या संलग्न करने की अनुमति देती है। फिर, परिभाषित तत्व को आईडी द्वारा एक्सेस करें और 'का उपयोग करें' रिवोकऑब्जेक्टURL() ' और ' createObjectURL () ” तरीके। इस पोस्ट में जावास्क्रिप्ट/एचटीएमएल का उपयोग करके सरल छवि अपलोड विधि बताई गई है।