See kirjutis demonstreerib pildi üleslaadimise meetodit JavaScripti ja HTML-i abil.
Kuidas JavaScripti/HTML-i abil lihtsat pilti üles laadida?
Lihtsa pildi üleslaadimiseks JavaScripti abil lisame esmalt HTML-lehele pildimärgendi ja seejärel kasutame JavaScripti koodi, et laadida ja valida pilt veebilehele.
Praktiliste mõjude saamiseks proovige esitatud juhiseid.
Näide
Kõigepealt järgige antud juhiseid:
- Sisestage '
” element ja määrake sisendi tüüp kui ' faili ”. - See 'faili' tüüp määrab failivaliku välja ja ' Sirvige ” nuppu failide üleslaadimiseks.
- “
” silt lisab reavahetuse. - Seejärel sisestage ' HTML-märgend ja lisage id ” atribuut, et määrata konkreetse nimega kordumatu ID.
- “ src ” atribuut, mida kasutatakse meediumifaili URL-i lisamiseks:
< br >
< img id = 'minu pilt' src = '#' >
Võib märgata, et failisuvand on loodud ja see saab kuvada pildi nime alles pärast sisendi vastuvõtmist:
Nüüd sees ' ', kasutage järgmist koodi:
< stsenaarium >
aken. addEventListener ( 'laadimine' , funktsioon ( ) {
dokument. querySelector ( 'sisend[tüüp='fail']' ) . addEventListener ( 'muutus' , funktsioon ( ) {
kui ( see . failid && see . failid [ 0 ] ) {
varimg = dokument. getElementById ( 'img_content' ) ;
img. laadimine = ( ) => {
URL . revokeObjectURL ( img. src ) ;
}
img. src = URL . looObjectURL ( see . failid [ 0 ] ) ;
}
} ) ;
} ) ;
stsenaarium >
Ülaltoodud koodilõigul:
- “ addEventListener() ” JavaScripti meetod võimaldab sisestada või lisada elemendile määratletud sündmuste käitleja.
- “ querySelector() ” on meetod, mida kasutatakse konkreetses dokumendis esimese üksuse tagastamiseks, mis lingib konkreetse valijaga.
- “ getElementById() ” meetodit kasutatakse elemendi hankimiseks määratletud ID abil. Selleks edastatakse parameetrina väärtus.
- “ revokeObjectURL() ” vabastab URL-i abil loodud olemasoleva objekti URL-i. Selleks edastatakse selle meetodi parameetrina pildi URL.
- “ looObjectURL() ” on JavaScripti staatiline meetod, mis paneb konkreetsele stringile URL-i, mis esindab parameetris edastatud objekti.
Väljund
Võib märgata, et oleme edukalt üles laadinud lihtsa pildi.
Järeldus
Lihtsa pildi üleslaadimiseks JavaScripti abil kasutage ' addEventListener() ” meetod, mis võimaldab elemendile sisestada või lisada määratletud sündmuste käitleja. Seejärel avage määratletud elemendile ID abil ja kasutage ' revokeObjectURL() ” ja „ looObjectURL() ” meetodid. See postitus kirjeldas lihtsat piltide üleslaadimise meetodit JavaScripti / HTML-i abil.