Šis raksts demonstrēs attēla augšupielādes metodi, izmantojot JavaScript un HTML.
Kā augšupielādēt vienkāršu attēlu, izmantojot JavaScript/HTML?
Lai augšupielādētu vienkāršu attēlu, izmantojot JavaScript, vispirms HTML lapā pievienosim attēla tagu un pēc tam izmantosim JavaScript kodu, lai ielādētu un atlasītu attēlu tīmekļa lapā.
Lai iegūtu praktiskas sekas, izmēģiniet sniegtos norādījumus.
Piemērs
Vispirms izpildiet sniegtos norādījumus:
- Ievietojiet '
' elementu un norādiet ievades veidu kā ' failu ”. - Šis “faila” tips nosaka lauku faila atlasē un “ Pārlūkot ” pogu, lai augšupielādētu failus.
- '
” tags ievieto rindiņas pārtraukumu. - Pēc tam ievietojiet '
'HTML tagu un pievienojiet ' id ” atribūtu, lai norādītu unikālo ID ar noteiktu nosaukumu.
- ' src ” atribūts, ko izmanto, lai pievienotu multivides faila URL:
< br >
< img id = 'mans attēls' src = '#' >
Var pamanīt, ka ir izveidota faila opcija, un tā var parādīt attēla nosaukumu tikai pēc tam, kad tā ir akceptējusi ievadi:
Tagad iekšā
< skripts >
logs. addEventListener ( 'slodze' , funkcija ( ) {
dokumentu. querySelector ( 'ievade[tips='fails']' ) . addEventListener ( 'mainīt' , funkcija ( ) {
ja ( šis . failus && šis . failus [ 0 ] ) {
varimg = dokumentu. getElementById ( 'img_content' ) ;
img. ielāde = ( ) => {
URL . atsauktObjectURL ( img. src ) ;
}
img. src = URL . CreateObjectURL ( šis . failus [ 0 ] ) ;
}
} ) ;
} ) ;
skripts >
Iepriekš minētajā koda fragmentā:
- ' addEventListener() ” JavaScript metode ļauj elementam ievietot vai pievienot definētu notikumu apdarinātāju.
- ' querySelector() ” ir metode, kas tiek izmantota, lai atgrieztu pirmo vienumu konkrētajā dokumentā, kas ir saistīts ar konkrēto atlasītāju.
- ' getElementById() ” metode tiek izmantota elementa iegūšanai, izmantojot definēto id. Šim nolūkam kā parametrs tiek nodota vērtība.
- ' atsauktObjectURL() ” atbrīvo esošu objekta URL, kas izveidots, izmantojot URL. Lai to izdarītu, attēla URL tiek nodots kā šīs metodes parametrs.
- ' CreateObjectURL() ” ir JavaScript statiskā metode, kas nodrošina noteiktai virknei URL, kas apzīmē parametrā nodoto objektu.
Izvade
Var pamanīt, ka esam veiksmīgi augšupielādējuši vienkāršu attēlu.
Secinājums
Lai augšupielādētu vienkāršu attēlu, izmantojot JavaScript, izmantojiet ' addEventListener() ” metode, kas ļauj elementam ievietot vai pievienot definētu notikumu apdarinātāju. Pēc tam piekļūstiet definētajam elementam ar ID un izmantojiet “ atsauktObjectURL() ' un ' CreateObjectURL() ' metodes. Šajā ziņojumā bija norādīta vienkārša attēlu augšupielādes metode, izmantojot JavaScript/HTML.