Chcę mieć możliwość podglądu pliku (obrazu) przed przesłaniem. Podgląd powinien zostać wykonany w przeglądarce bez użycia Ajaxa do przesłania obrazu.
W jaki sposób mogę to zrobić?
javascript
jquery
file-upload
Simbian
źródło
źródło
Odpowiedzi:
Spójrz na przykładowy kod poniżej:
Możesz także wypróbować tę próbkę tutaj .
źródło
document.getElementById('blah').src=e.target.result)
input.files[0]
jako dane, patrz dokument jQuery .input.files[0]
nie ma pełnej ścieżki. Jak FileReader lokalizuje plik?Można to zrobić na kilka sposobów. Najbardziej wydajnym sposobem byłoby użycie URL.createObjectURL () w pliku z <wejścia> . Przekaż ten adres URL do img.src, aby poinformować przeglądarkę o załadowaniu dostarczonego obrazu.
Oto przykład:
Możesz także użyć FileReader.readAsDataURL () do parsowania pliku z <wejścia>. Spowoduje to utworzenie ciągu w pamięci zawierającego reprezentację base64 obrazu.
źródło
URL.revokeObjectURL
gdy skończysz z blobemRozwiązanie jednowarstwowe:
Poniższy kod używa URL-i obiektu, który jest znacznie bardziej wydajny niż URL danych do przeglądania dużych obrazów (URL danych to ogromny ciąg zawierający wszystkie dane pliku, podczas gdy URL obiektu to tylko krótki ciąg odwołujący się do danych pliku pamięć):
Wygenerowany adres URL będzie wyglądał następująco:
źródło
FileReader
,input.files
etc.)URL.createObjectURL
jest do zrobienia przy rozpatrywaniu użytkowników złożone pliki, a jedynie tworzy dowiązania w pamięci realnej pliku na dysku użytkownika.Odpowiedź LeassTaTT działa dobrze w „standardowych” przeglądarkach takich jak FF i Chrome. Rozwiązanie dla IE istnieje, ale wygląda inaczej. Oto opis rozwiązania dla różnych przeglądarek:
W HTML potrzebujemy dwóch elementów podglądu,
img
dla standardowych przeglądarek idiv
dla IEHTML:
W CSS określamy następującą rzecz specyficzną dla IE:
CSS:
W HTML dołączamy standardowe i specyficzne dla IE Javascripts:
Jest
pic_preview.js
to JavaScript z odpowiedzi LeassTaTT. Wymień$('#blah')
whith$('#preview')
i dodaj$('#preview').show()
Teraz JavaScript specyficzny dla IE (pic_preview_ie.js):
To jest. Działa w IE7, IE8, FF i Chrome. Przetestuj w IE9 i zgłoś. Pomysł podglądu IE został znaleziony tutaj: http://forums.asp.net/t/1320559.aspx
http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx
źródło
Zredagowałem odpowiedź @ Ivan, aby wyświetlić obraz „Brak podglądu”, jeśli nie jest to obraz:
źródło
Oto wersja z wieloma plikami , oparta na odpowiedzi Ivana Baeva.
HTML
JavaScript / jQuery
Wymaga jQuery 1.8 ze względu na użycie $ .parseHTML, co powinno pomóc w łagodzeniu XSS.
Działa to natychmiast po wyjęciu z pudełka, a jedyną potrzebną zależnością jest jQuery.
źródło
Tak. To jest możliwe.
HTML
JS
Tutaj możesz pobrać wersję demonstracyjną na żywo .
źródło
Czysty i prosty JSfiddle
Będzie to przydatne, gdy chcesz Zdarzenie wyzwalane pośrednio z div lub przycisku.
źródło
<label>
javascript do unikania obsługi kliknięcia przycisku i unikać go. Uruchom wejście pliku z czystym HTML / CSS. i wcale nie jest hacking.Przykład z wieloma obrazami przy użyciu JavaScript (jQuery) i HTML5
JavaScript (jQuery)
Znaczniki (HTML)
źródło
Co powiesz na utworzenie funkcji, która ładuje plik i uruchamia niestandardowe zdarzenie. Następnie dołącz odbiornik do wejścia. W ten sposób mamy większą elastyczność w korzystaniu z pliku, nie tylko do podglądu obrazów.
Prawdopodobnie mój kod nie jest tak dobry, jak niektórzy użytkownicy, ale myślę, że zrozumiesz. Tutaj możesz zobaczyć przykład
źródło
Poniżej znajduje się działający kod.
Javascript:
źródło
W React, jeśli plik znajduje się w twoich rekwizytach, możesz użyć:
źródło
Co z tym rozwiązaniem?
Wystarczy dodać atrybut danych „data-type = editable” do tagu graficznego takiego jak ten:
Oczywiście skrypt do twojego projektu ...
Zobacz demo na JSFiddle
źródło
Spróbuj tego
źródło
Spowoduje to wyświetlenie podglądu wielu plików jako miniatur
HTML
Scenariusz
Demo robocze na Codepen
Działa demo na jsfiddle
Mam nadzieję, że to pomoże.
źródło
Zrobiłem wtyczkę, która może generować efekt podglądu w IE 7+ dzięki Internetowi, ale ma kilka ograniczeń. Umieściłem go na stronie github, aby łatwiej było go zdobyć
źródło
W przypadku przesyłania wielu zdjęć (modyfikacja rozwiązania @ IvanBaev)
http://jsfiddle.net/LvsYc/12330/
Mam nadzieję, że to komuś pomoże.
źródło
To mój kod. Obsługa IE [6-9] 、 chrome 17 + 、 firefox 、 Opera 11 + 、 Maxthon3
źródło
Domyślnie Iamge
źródło
Oto rozwiązanie, jeśli używasz React:
źródło
Oto jedna prosta metoda podglądu obrazu przed przesłaniem go na serwer z przeglądarki bez użycia Ajax lub jakichkolwiek skomplikowanych funkcji. Potrzebuje zdarzenia „onchange”, aby załadować obraz.
Obraz zostanie natychmiast załadowany po wybraniu.
Kliknij ten link, aby zobaczyć, jak to działa https://youtu.be/7_lGhrYZJWw
źródło
w mojej aplikacji z zakodowanymi parametrami GET url tylko to działało. Zawsze mam
TypeError: $(...) is null
. Zaczerpnięte z https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURLźródło
HTML
Dotyczy to również przypadku, gdy zostanie wybrany plik nieprawidłowego typu (np. Pdf)
źródło