Input image file widh & height

Question

I wanna get Width and height of the Input file image before update. Its better to get in onchange. but i cant get that actual width and height.

this is cshtml code:

here "imgIdentityPicture" is image view box

<div class="col-md-2 col-md-offset-1">
                            <input type="file" name="IdentityPicture" id="IdentityPicture" />
                        </div>

this is script on change :

$(function () {
    // Save Customer Identity
    $('#IdentityPicture').on('change', function (e) {
        e.preventDefault();
        var form = $(this).parents('form:first');

        $('#imgIdentityPicture').attr("src", '/Content/Images/Animation/loading_fast.gif');

        form.ajaxSubmit({
            success: function (data) {
                $('#imgIdentityPicture').attr("src", data.Url);
                $('#SettleBeneficiaryIdPicture').val(data.FileName);

            },
            beforeSubmit: function (arr, $form, options) {

            },
            error: function () {
                alert('error');
            }

        });
    });
});

score 1 · Answer 1 · edited May 23 '17 at 12:29

       <input type="file" name="photo" id="photoInput" />

 $.validator.addMethod('imagedim', function(value, element, param) {
    var _URL = window.URL;
    var  img;
    if ((element = this.files[0])) {
        img = new Image();
        img.onload = function () {
            console.log("Width:" + this.width + "   Height: " + this.height);//this will give you image width and height and you can easily validate here....

            return this.width >= param
        };
        img.src = _URL.createObjectURL(element);
    }
 });

See this.. (How to Preview Image, get file size, image height and width before upload?)

score 0 · Answer 2 · answered Mar 26 '14 at 07:13

Try this,

$(function(){
    $('#IdentityPicture').on('change', function (e) {
        e.preventDefault();
        var form = $(this).parents('form:first');

        $('#imgIdentityPicture').attr("src", '/Content/Images/Animation/loading_fast.gif');

        /* code to get width of image */
        var file, img;
        if ((file = this.files[0])) {
           img = new Image();
           img.onload = function () {
               alert(this.width + " " + this.height);
           };
        }
        form.ajaxSubmit({
            success: function (data) {
                $('#imgIdentityPicture').attr("src", data.Url);
                $('#SettleBeneficiaryIdPicture').val(data.FileName);

            },
            beforeSubmit: function (arr, $form, options) {

            },
            error: function () {
                alert('error');
            }
        });
    });
});

Input image file widh & height

2 Answers2