Przesyłanie pliku i podgląd za pomocą JavaScript

W tym poradniku pokażę ci, jak za pomocą JavaScript obsługiwać dostęp do plików lokalnych, które zostały wybrane za pomocą pola Input. Możliwe jest edytowanie wybranych plików, ich lokalne wyświetlanie, a nawet generowanie podglądu bez konieczności ich wysyłania na serwer. Ta wiedza jest szczególnie przydatna, jeśli chcesz tworzyć przyjazne dla użytkownika formularze z funkcjami przesyłania plików. Zaraz przejdziemy do szczegółów!

Najważniejsze wnioski

• Dowiedziesz się, jak za pomocą JavaScript uzyskać dostęp do plików elementu Wejścia, wyświetlić je i wygenerować podgląd.
• Dowiedziesz się również, jak dostosować rozmiar wyświetlanych obrazków i jak to zrobić bez konieczności formularza.

Instrukcje krok po kroku

Aby zaimplementować funkcjonalność, najpierw potrzebujesz elementu wejścia HTML i trochę JavaScriptu. Poniżej objaśniam poszczególne kroki.

Krok 1: Konfiguracja HTML

Najpierw musisz utworzyć dokument HTML, który zawiera element Input File. Użyj odpowiedniego identyfikatora, aby mieć do niego dostęp później.

Krok 2: Dodanie JavaScriptu

Na końcu swojego dokumentu HTML dodajesz skrypt JavaScript. Dzięki temu możesz uzyskać dostęp do elementu wejścia i zaimplementować swoją logikę. Pierwszym krokiem w skrypcie jest pobranie elementu wejściowego za pomocą metody getElementById.

Krok 3: Ustawienie Słuchacza Zdarzeń

Teraz ustawiasz słuchacza zdarzeń dla zdarzenia zmiany. To zdarzenie zostanie wywołane, gdy zostanie wybrany plik. Wewnątrz funkcji zwrotnej obsługujesz wybrane pliki.

Krok 4: Dostęp do Pliku(lub plików)

W funkcji zwrotnej otrzymujesz dostęp do wybranych plików za pomocą właściwości plików elementu wejściowego. Ta właściwość zwraca obiekt zbliżony do tablicy, który zawiera wszystkie wybrane pliki.

Krok 5: Przejście i Wyświetlanie Plików

Teraz nadszedł czas, aby iterować po każdym wybranym pliku i go wyświetlić. Możesz utworzyć element , który będzie przedstawiał podgląd pliku, korzystając z funkcji URL.createObjectURL().

Krok 6: Dostosowanie Rozmiaru Obrazu

W tym momencie możesz łatwo dostosować rozmiar obrazów. Sugerowane są stałe wartości, takie jak 100x100 pikseli lub, jeśli chcesz większą swobodę, użyj oryginalnej wysokości i szerokości.

Krok 7: Obsługa Wielu Plików

System powinien świetnie radzić sobie nie tylko z jednym plikiem, ale także z wieloma wyborami plików. Zaimplementuj logikę, aby każdy plik był traktowany oddzielnie i wyświetlany na twojej stronie.

Krok 8: Wprowadzenie Podglądu

Teraz możesz pokazać prosty podgląd dla użytkowników. Użytkownik może od razu zobaczyć, jakie pliki wybrał, zanim zostaną wysłane. Dzięki temu oszczędzasz nie tylko użytkownikowi, ale także zasoby serwera.

Krok 9: Wyświetlanie Nazwy Pliku Jako Podpowiedzi

Aby poprawić doświadczenia użytkownika, możesz zintegrować nazwę pliku jako podpowiedź do tagu obrazka. Jest to szczególnie użyteczne, gdy wysyłanych jest wiele plików.

Krok 10: Zapewnienie identyfikacji

Dobrym pomysłem jest również zapewnienie użytkownikom możliwości identyfikowania wysłanych plików, dodając nazwę pod każdym obrazem lub do atrybutu alt obrazów.

Podsumowanie

W tym samouczku nauczyłeś się, jak za pomocą JavaScript uzyskać dostęp do plików lokalnych i wyświetlić je w swoim formularzu internetowym. Możesz kontrolować rozmiar wyświetlanych obrazów, dodawać etykiety narzędziowe i zapewnić przyjazną dla użytkownika podgląd, wszystko bez konieczności przesyłania plików na serwer. Te umiejętności są kluczowe dla przeprowadzania przesyłania plików i interakcji w nowoczesnych aplikacjach internetowych.