ஜாவாஸ்கிரிப்ட் மற்றும் HTML ஐப் பயன்படுத்தி படத்தைப் பதிவேற்றும் முறையை இந்த ரைட்-அப் காண்பிக்கும்.
ஜாவாஸ்கிரிப்ட்/எச்டிஎம்எல் பயன்படுத்தி ஒரு எளிய படத்தை எவ்வாறு பதிவேற்றுவது?
ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஒரு எளிய படத்தைப் பதிவேற்ற, முதலில், HTML பக்கத்தில் ஒரு படக் குறியைச் சேர்ப்போம், பின்னர் வலைப்பக்கத்தில் படத்தை ஏற்றித் தேர்ந்தெடுக்க ஜாவாஸ்கிரிப்ட் குறியீட்டைப் பயன்படுத்துவோம்.
நடைமுறை தாக்கங்களுக்கு, கூறப்பட்ட வழிமுறைகளை முயற்சிக்கவும்.
உதாரணமாக
முதலில், கொடுக்கப்பட்ட வழிமுறைகளைப் பின்பற்றவும்:
- செருகு ' <உள்ளீடு> 'உறுப்பு மற்றும் உள்ளீட்டின் வகையை' எனக் குறிப்பிடவும் கோப்பு ”.
- இந்த 'கோப்பு' வகை கோப்பு-தேர்ந்தெடுக்கப்பட்ட புலத்தை தீர்மானிக்கிறது மற்றும் ஒரு ' உலாவவும் ” கோப்புகளைப் பதிவேற்றுவதற்கான பொத்தான்.
- '
” குறிச்சொல் ஒரு வரி முறிவைச் செருகுகிறது. - பின்னர், '' ஐ செருகவும் 'HTML குறிச்சொல்லைச் சேர்த்து,' ஐடி ஒரு குறிப்பிட்ட பெயருடன் தனித்துவமான ஐடியைக் குறிப்பிடுவதற்கான பண்புக்கூறு.
- ' src மீடியா கோப்பின் URL ஐச் சேர்க்கப் பயன்படுத்தப்படும் பண்புக்கூறு:
< br >
< img ஐடி = 'என் படம்' src = '#' >
ஒரு கோப்பு விருப்பம் உருவாக்கப்பட்டிருப்பதைக் கவனிக்க முடியும், மேலும் அது உள்ளீட்டை ஏற்றுக்கொண்ட பிறகு மட்டுமே படத்தின் பெயரைக் காண்பிக்க முடியும்:
இப்போது, உள்ளே ' ” குறிச்சொல், பின்வரும் குறியீட்டைப் பயன்படுத்தவும்:
< கையால் எழுதப்பட்ட தாள் >
ஜன்னல். addEventListener ( 'சுமை' , செயல்பாடு ( ) {
ஆவணம். querySelector ( 'உள்ளீடு[type='file']' ) . addEventListener ( 'மாற்றம்' , செயல்பாடு ( ) {
என்றால் ( இது . கோப்புகள் && இது . கோப்புகள் [ 0 ] ) {
varimg = ஆவணம். getElementById ( 'img_content' ) ;
img ஏற்று = ( ) => {
URL . revokeObjectURL ( img src ) ;
}
img src = URL . createObjectURL ( இது . கோப்புகள் [ 0 ] ) ;
}
} ) ;
} ) ;
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீடு துணுக்கில்:
- ' addEventListener() ” JavaScript முறையானது ஒரு உறுப்புடன் வரையறுக்கப்பட்ட நிகழ்வு கையாளுதலைச் செருக அல்லது இணைக்க அனுமதிக்கிறது.
- ' querySelector() ” என்பது குறிப்பிட்ட ஆவணத்தில் குறிப்பிட்ட தேர்வாளருடன் இணைக்கும் முதல் உருப்படியைத் திருப்பி அனுப்பப் பயன்படும் ஒரு முறையாகும்.
- ' getElementById() வரையறுக்கப்பட்ட ஐடியைப் பயன்படுத்தி உறுப்பைப் பெறுவதற்கு ” முறை பயன்படுத்தப்படுகிறது. அந்த நோக்கத்திற்காக, இன் மதிப்பு அளவுருவாக அனுப்பப்படுகிறது.
- ' revokeObjectURL() URL ஐப் பயன்படுத்தி உருவாக்கப்பட்ட ஏற்கனவே உள்ள பொருள் URL ஐ வெளியிடுகிறது. அவ்வாறு செய்ய, படத்தின் URL இந்த முறையின் அளவுருவாக அனுப்பப்படும்.
- ' createObjectURL() ” என்பது ஒரு ஜாவாஸ்கிரிப்ட் நிலையான முறையாகும், இது ஒரு குறிப்பிட்ட சரம் அளவுருவில் அனுப்பப்பட்ட பொருளைக் குறிக்கும் URL ஐக் கொண்டிருக்கும்.
வெளியீடு
ஒரு எளிய படத்தை வெற்றிகரமாக பதிவேற்றியிருப்பதைக் கவனிக்கலாம்.
முடிவுரை
ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி எளிய படத்தைப் பதிவேற்ற, ' addEventListener() 'ஒரு உறுப்புடன் வரையறுக்கப்பட்ட நிகழ்வு கையாளுதலைச் செருக அல்லது இணைக்க அனுமதிக்கும் முறை. பின்னர், ஐடி மூலம் வரையறுக்கப்பட்ட உறுப்பை அணுகி, '' ஐப் பயன்படுத்தவும் revokeObjectURL() 'மற்றும்' createObjectURL() ”முறைகள். இந்த இடுகை JavaScript/HTML ஐப் பயன்படுத்தி எளிமையான படத்தைப் பதிவேற்றும் முறையைக் கூறியது.