Limit width and height of image on input field

Question

Is it possible to limit the width and height of the pic on input field by using html, css and javascript/jquery? I'm trying to limit it for profile photo upload (need the photo to be a perfect square, e.g. 200x200, 300x300)

You can refer to this [Stack Overflow answer](https://stackoverflow.com/questions/13572129/is-it-possible-to-check-dimensions-of-image-before-uploading) — Chan MT, Jul 26 '18 at 01:45

score 0 · Answer 1 · answered Jul 26 '18 at 01:48

0

PHP has a function called getimagesize().

list($width, $height, $type, $attr) = getimagesize("img.jpg");

as can be seen in the documentation: http://php.net/manual/en/function.getimagesize.php

So, just check the height and width before submitting to the database

answered Jul 26 '18 at 01:48

MichaelvE

2,558
2
9
18

I'm using django though? – Lee Merlas Jul 26 '18 at 01:55

score 0 · Answer 2 · answered Jul 26 '18 at 02:50

You can check the height of width of the image by creating an image from the uploaded file.

$("#fileUploadForm").submit(function(e){
var window.URL = window.URL || window.webkitURL;
var fileInput = $(this).find("input[type=file]")[0],
    file = fileInput.files ? fileInput.files[0] : null;

if( file ) {
    var img = new Image();

    img.src = window.URL.createObjectURL( file );

    img.onload = function() {
        var width = img.naturalWidth,
            height = img.naturalHeight;

        window.URL.revokeObjectURL( img.src );

        if( width == height) {//perfect square
            this.submit();
        }
        else {
            //fail
        }
    };
}
});

Limit width and height of image on input field

2 Answers2