Denne skrive-up vil demonstrere metoden til at uploade billedet ved hjælp af JavaScript og HTML.
Hvordan uploader man et simpelt billede ved hjælp af JavaScript/HTML?
For at uploade et simpelt billede ved hjælp af JavaScript, vil vi først tilføje et billedtag på HTML-siden og derefter bruge JavaScript-koden til at indlæse og vælge billedet på websiden.
For praktiske implikationer, prøv de angivne instruktioner.
Eksempel
Først og fremmest skal du følge de givne instruktioner:
- Indsæt ' ' element og angiv typen af input som ' fil ”.
- Denne 'fil'-type bestemmer feltet i filvalg og en ' Gennemse ”-knap til at uploade filerne.
- “
” tag indsætter et linjeskift. - Indsæt derefter en ' ' HTML-tag og tilføj ' id ” attribut for at angive det unikke id med et bestemt navn.
- “ src ” attribut, der bruges til at tilføje mediefilens URL:
< br >
< img id = 'mit billede' src = '#' >
Det kan bemærkes, at en filindstilling er blevet oprettet, og den kan kun vise billednavnet efter at have accepteret det som input:
Nu, inde i ' ' tag, skal du bruge følgende kode:
< manuskript >
vindue. addEventListener ( 'belastning' , funktion ( ) {
dokument. querySelector ( 'input[type='fil']' ) . addEventListener ( 'lave om' , funktion ( ) {
hvis ( det her . filer && det her . filer [ 0 ] ) {
varimg = dokument. getElementById ( 'img_content' ) ;
img. påfyldning = ( ) => {
URL . revokeObjectURL ( img. src ) ;
}
img. src = URL . createObjectURL ( det her . filer [ 0 ] ) ;
}
} ) ;
} ) ;
manuskript >
I ovenstående kodestykke:
- “ addEventListener() ” JavaScript-metoden tillader at indsætte eller vedhæfte en defineret hændelseshandler til et element.
- “ querySelector() ” er en metode, der bruges til at returnere den første vare i det pågældende dokument, der linker til den bestemte vælger.
- “ getElementById() ”-metoden bruges til at få elementet ved at bruge det definerede id. Til det formål overføres værdien af den som parameter.
- “ revokeObjectURL() ” frigiver en eksisterende objekt-URL oprettet ved hjælp af URL'en. For at gøre det videregives URL'en til billedet som parameter for denne metode.
- “ createObjectURL() ” er en statisk JavaScript-metode, der får en bestemt streng til at have en URL, der repræsenterer objektet, der sendes i parameteren.
Produktion
Det kan bemærkes, at vi med succes har uploadet et simpelt billede.
Konklusion
For at uploade det simple billede ved hjælp af JavaScript, brug ' addEventListener() ” metode, der tillader indsættelse eller vedhæftning af en defineret hændelseshandler til et element. Få derefter adgang til det definerede element med id og brug ' revokeObjectURL() ' og ' createObjectURL() ' metoder. Dette indlæg angav den enkle billedoverførselsmetode ved hjælp af JavaScript/HTML.