Ten artykuł zademonstruje metodę przesyłania obrazu przy użyciu JavaScript i HTML.
Jak przesłać prosty obraz za pomocą JavaScript/HTML?
Aby przesłać prosty obraz za pomocą JavaScript, najpierw dodamy tag obrazu na stronie HTML, a następnie użyjemy kodu JavaScript do załadowania i wybrania obrazu na stronie internetowej.
Aby uzyskać praktyczne implikacje, wypróbuj podane instrukcje.
Przykład
Przede wszystkim postępuj zgodnie z podanymi instrukcjami:
- Wstaw „
” i określ typ wejścia jako „ plik ”. - Ten typ „pliku” określa pole wyboru pliku i „ Przeglądać ”, aby przesłać pliki.
- “
Znacznik ” wstawia podział wiersza. - Następnie wstaw „
” znacznik HTML i dodaj „ ID ”, aby określić unikalny identyfikator o określonej nazwie. - “ źródło ” atrybut używany do dodawania adresu URL pliku multimedialnego:
< br >
< identyfikator img = 'mój obraz' źródło = '#' >
Można zauważyć, że utworzono opcję pliku, która może wyświetlać nazwę obrazu dopiero po zaakceptowaniu jej wejścia:
Teraz wewnątrz „
< scenariusz >
okno. addEventListener ( 'obciążenie' , funkcja ( ) {
dokument. zapytanieSelektor ( „wejście [typ = „plik”]” ) . addEventListener ( 'zmiana' , funkcja ( ) {
Jeśli ( Ten . akta && Ten . akta [ 0 ] ) {
varimg = dokument. getElementById ( „zawartość_img” ) ;
img. załaduj = ( ) => {
Adres URL . odwołajObjectURL ( img. źródło ) ;
}
img. źródło = Adres URL . utwórzObjectURL ( Ten . akta [ 0 ] ) ;
}
} ) ;
} ) ;
scenariusz >
W powyższym fragmencie kodu:
- “ addEventListener() ” Metoda JavaScript pozwala na wstawienie lub dołączenie zdefiniowanej obsługi zdarzenia do elementu.
- “ zapytanieSelektor() ” to metoda używana do zwrócenia pierwszego elementu w konkretnym dokumencie, który łączy się z określonym selektorem.
- “ getElementById() ” służy do pobierania elementu przy użyciu zdefiniowanego identyfikatora. W tym celu wartość jest przekazywana jako parametr.
- “ odwołajObjectURL() ” zwalnia istniejący adres URL obiektu utworzony przy użyciu adresu URL. Aby to zrobić, adres URL obrazu jest przekazywany jako parametr tej metody.
- “ utwórzObjectURL() ” to statyczna metoda JavaScript, która powoduje, że określony ciąg ma adres URL reprezentujący obiekt przekazany w parametrze.
Wyjście
Można zauważyć, że udało nam się przesłać prosty obraz.
Wniosek
Aby przesłać prosty obraz za pomocą JavaScript, użyj „ addEventListener() ”, która umożliwia wstawienie lub dołączenie zdefiniowanej procedury obsługi zdarzenia do elementu. Następnie uzyskaj dostęp do zdefiniowanego elementu za pomocą identyfikatora i użyj „ odwołajObjectURL() ' I ' utwórzObjectURL() metody. W tym poście podano prostą metodę przesyłania obrazu przy użyciu JavaScript/HTML.