Mam JPS z formularzem, w którym użytkownik może umieścić obrazek:
<div class="photo">
<div>Photo (max 240x240 and 100 kb):</div>
<input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/>
</div>
Napisałem to js:
function checkPhoto(target) {
if(target.files[0].type.indexOf("image") == -1) {
document.getElementById("photoLabel").innerHTML = "File not supported";
return false;
}
if(target.files[0].size > 102400) {
document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)";
return false;
}
document.getElementById("photoLabel").innerHTML = "";
return true;
}
co działa dobrze, aby sprawdzić typ i rozmiar pliku. Teraz chcę sprawdzić szerokość i wysokość obrazu, ale nie mogę tego zrobić.
Próbowałem, target.files[0].width
ale dostaję undefined
. Na inne sposoby 0
.
Jakieś sugestie?
źródło
Moim zdaniem idealną odpowiedzią, której musisz wymagać, jest
źródło
Zgadzam się. Po przesłaniu w miejsce, do którego przeglądarka użytkownika ma dostęp, dość łatwo jest uzyskać rozmiar. Ponieważ musisz poczekać na załadowanie obrazu, chcesz podłączyć się do
onload
zdarzeniaimg
.źródło
To najłatwiejszy sposób na sprawdzenie rozmiaru
Sprawdź konkretny rozmiar. Na przykładzie 100 x 100
źródło
function validateimg (ctrl) {
źródło
Dołącz funkcję do metody zmiany typu danych wejściowych file / onchange = "validateimg (this)" /
źródło
źródło
źródło