Как проверить размер изображения при каждой загрузке

Question

Я пытаюсь загрузить изображения размером более 900 пикселей. поэтому я проверяю при загрузке. У меня есть знак «плюс», когда мы нажимаем эту кнопку другого файла.

Первые значения ввода только для меня. Я не мог получить другие файлы.

<input type="file" id="upload_profile" class="upload_profile" name="upload_profile[]" /> 

Сценарий:

var _URL = window.URL || window.webkitURL; 
$(".upload_profile").change(function(e) { 
var file, img; 
if ((file = this.files[0])) { 
    img = new Image(); 
    img.onload = function() { 
     alert(this.width + " " + this.height); 
    }; 
    img.onerror = function() { 
     alert("not a valid file: " + file.type); 
    }; 
    img.src = _URL.createObjectURL(file); 
} 
}); 

Answer 1

Как и другие элементы не существуют в DOM, когда вложенное событие, вам нужно использовать event delegation. Делегирование событий позволяет нам присоединить одного прослушивателя событий к родительскому элементу, который будет срабатывать для всех потомков, соответствующих селектору, независимо от того, существуют ли эти потомки или добавлены в будущем.

var _URL = window.URL || window.webkitURL; 
 
$(document).on('change', '.upload_profile', function() { 
 
if (this.value) { 
 
    var file = this.files[0]; 
 
    var img = new Image(); 
 
    img.onload = function() { 
 
     alert(this.width + " " + this.height); 
 
    }; 
 
    img.onerror = function() { 
 
     alert("not a valid file: " + file.type); 
 
    }; 
 
    img.src = _URL.createObjectURL(file); 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="file" class="upload_profile" name="upload_profile[]" /><br><br> 
 
<input type="file" class="upload_profile" name="upload_profile[]" /><br><br> 
 
<input type="file" class="upload_profile" name="upload_profile[]" /><br><br>