Jak mogę uzyskać rozmiar pliku, wysokość i szerokość obrazu przed przesłaniem do mojej witryny, za pomocą jQuery lub JavaScript?
javascript
jquery
html
dimensions
image-size
Afshin
źródło
źródło
Odpowiedzi:
Przesyłanie wielu obrazów z podglądem danych
Korzystanie z HTML5 i File API
Przykład z wykorzystaniem interfejsu API URL
Źródłami obrazów będą adresy URL reprezentujące obiekt Blob
<img src="blob:null/026cceb9-edr4-4281-babb-b56cbf759a3d">
Przykład użycia FileReader API
W przypadku, gdy potrzebujesz źródeł obrazów, takich jak długie ciągi danych zakodowane w Base64
<img src="data:image/png;base64,iVBORw0KGg... ...lF/++TkSuQmCC=">
źródło
Jeśli możesz użyć wtyczki do walidacji jQuery, możesz to zrobić w następujący sposób:
HTML:
JavaScript:
Funkcja jest przekazywana jako funkcja ab onload.
Kod jest pobierany stąd
źródło
Próbny
Nie jestem pewien, czy tego chcesz, ale po prostu prosty przykład:
źródło
Oto przykład w czystym języku JavaScript, w którym wybiera się plik obrazu, wyświetla go, przegląda właściwości obrazu, a następnie zmienia rozmiar obrazu z kanwy na znacznik IMG i jawnie ustawia typ obrazu o zmienionym rozmiarze na jpeg.
Jeśli klikniesz prawym przyciskiem myszy górny obraz w tagu płótna i wybierzesz Zapisz plik jako, domyślnie zostanie ustawiony format PNG. Jeśli klikniesz prawym przyciskiem myszy i zapiszesz plik jako dolny obraz, domyślnie zostanie ustawiony format JPEG. Każdy plik o szerokości przekraczającej 400 pikseli jest zmniejszany do szerokości 400 pikseli, a wysokość jest proporcjonalna do oryginalnego pliku.
HTML
SCENARIUSZ
Oto jsFiddle:
jsFiddle Wybierz, wyświetl, pobierz właściwości i zmień rozmiar pliku obrazu
W jsFiddle kliknięcie prawym przyciskiem myszy górnego obrazu, który jest płótnem, nie daje takich samych opcji zapisywania, jak kliknięcie prawym przyciskiem myszy dolnego obrazu w tagu IMG.
źródło
O ile wiem, nie ma na to łatwego sposobu, ponieważ Javascript / JQuery nie ma dostępu do lokalnego systemu plików. W html 5 jest kilka nowych funkcji, które pozwalają sprawdzić pewne metadane, takie jak rozmiar pliku, ale nie jestem pewien, czy rzeczywiście możesz uzyskać wymiary obrazu.
Oto artykuł, który znalazłem, dotyczący funkcji HTML 5 i obejścia dla IE, które obejmuje użycie formantu ActiveX. http://jquerybyexample.blogspot.com/2012/03/how-to-check-file-size-before-uploading.html
źródło
Zacząłem więc eksperymentować z różnymi rzeczami, które miał do zaoferowania FileReader API i mogłem stworzyć tag IMG z adresem URL DANYCH.
Wada: nie działa na telefonach komórkowych, ale działa dobrze w Google Chrome.
(zobacz to na jsfiddle pod adresem http://jsfiddle.net/eD2Ez/530/ )
(zobacz oryginalny plik jsfiddle, do którego dodałem na http://jsfiddle.net/eD2Ez/ )
źródło
Działający przykład walidacji jQuery:
źródło