Ez az írás bemutatja a kép feltöltésének módját JavaScript és HTML használatával.
Hogyan töltsünk fel egy egyszerű képet JavaScript/HTML használatával?
Egy egyszerű kép JavaScript használatával történő feltöltéséhez először egy képcímkét adunk hozzá a HTML-oldalhoz, majd a JavaScript kód segítségével betöltjük és kiválasztjuk a képet a weboldalra.
A gyakorlati vonatkozásokért próbálja ki a megadott utasításokat.
Példa
Először is kövesse a megadott utasításokat:
- Helyezze be a „
' elemet, és adja meg a bemenet típusát ' fájlt ”. - Ez a „fájl” típus határozza meg a fájlkiválasztás mezőjét és a „ Tallózás ” gombot a fájlok feltöltéséhez.
- '
” címke sortörést szúr be. - Ezután illesszen be egy „ ' HTML címkét, és adja hozzá a ' id ” attribútum az egyedi azonosító megadásához egy adott névvel.
- ' src ” attribútum a médiafájl URL-címének hozzáadásához:
< br >
< img id = 'az én képem' src = '#' >
Észrevehető, hogy létrejött egy fájl opció, amely csak a bevitel elfogadása után tudja megjeleníteni a kép nevét:
Most, a „ ” címke, használja a következő kódot:
< forgatókönyv >
ablak. addEventListener ( 'Betöltés' , funkció ( ) {
dokumentum. querySelector ( 'input[type='file']' ) . addEventListener ( 'változás' , funkció ( ) {
ha ( ez . fájlokat && ez . fájlokat [ 0 ] ) {
varimg = dokumentum. getElementById ( 'img_content' ) ;
img. Feltöltés alatt = ( ) => {
URL . revokeObjectURL ( img. src ) ;
}
img. src = URL . createObjectURL ( ez . fájlokat [ 0 ] ) ;
}
} ) ;
} ) ;
forgatókönyv >
A fenti kódrészletben:
- ' addEventListener() ” A JavaScript metódus lehetővé teszi egy meghatározott eseménykezelő beillesztését vagy csatolását egy elemhez.
- ' querySelector() ” egy olyan módszer, amely az adott dokumentum első elemének visszaadására szolgál, amely az adott választóhoz kapcsolódik.
- ' getElementById() ” metódust használjuk az elem lekéréséhez a definiált id használatával. Ebből a célból a paraméter értékét adjuk át.
- ' revokeObjectURL() ” kiad egy meglévő objektum URL-t, amelyet az URL használatával hoztak létre. Ehhez a kép URL-címe kerül átadásra a módszer paramétereként.
- ' CreateObjectURL() ” egy statikus JavaScript-metódus, amely egy adott karakterlánchoz rendelkezik egy URL-lel, amely a paraméterben átadott objektumot képviseli.
Kimenet
Észrevehető, hogy sikeresen feltöltöttünk egy egyszerű képet.
Következtetés
Az egyszerű kép JavaScript használatával történő feltöltéséhez használja a „ addEventListener() ” metódus, amely lehetővé teszi egy meghatározott eseménykezelő beillesztését vagy csatolását egy elemhez. Ezután nyissa meg a meghatározott elemet azonosítóval, és használja a ' revokeObjectURL() ” és „ CreateObjectURL() ” módszerekkel. Ez a bejegyzés az egyszerű képfeltöltési módszert ismerteti JavaScript/HTML használatával.