Проверьте ширину и высоту изображения перед загрузкой с помощью Javascript

Question

Проверьте ширину и высоту изображения перед загрузкой с помощью Javascript

У меня есть JPS с формой, в которой пользователь может поместить изображение:

<div class="photo">
    <div>Photo (max 240x240 and 100 kb):</div>
    <input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/>
</div>

Я написал этот 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;
}

, который отлично работает для проверки типа и размера файла. Теперь я хочу проверить ширину и высоту изображения, но не могу этого сделать.
Я пробовал использовать target.files [0] .width , но получил undefined . Другими способами я получаю 0 .
Есть предложения?

97

javascript image file-upload image-size

задан SandroMarques 9 July 2016 в 10:49

1 ответ

Другие вопросы по тегам:

javascript image file-upload image-size

Похожие вопросы:

score 0 · Answer 1

Это - самый легкий способ проверить размер

let img = new Image()
img.src = window.URL.createObjectURL(event.target.files[0])
img.onload = () => {
   alert(img.width + " " + img.height);
}

Проверка на определенный размер. Используя 100 x 100 как пример

let img = new Image()
img.src = window.URL.createObjectURL(event.target.files[0])
img.onload = () => {
   if(img.width === 100 && img.height === 100){
        alert(`Nice, image is the right size. It can be uploaded`)
        // upload logic here
        } else {
        alert(`Sorry, this image doesn't look like the size we wanted. It's 
   ${img.width} x ${img.height} but we require 100 x 100 size image.`);
   }                
}