如何在每次上传中验证图像大小

Question

I'm trying to upload the images which is greater than 900 pixels. so i do validate when upload. I have the plus sign when we click this another file button will appear.

The first input box values only i got. I couldn't get another files.

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

Script:

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

As other elements are not there in DOM when event is attached, you need to use event delegation. Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

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>

</div>