Getting file width and height with File API

Question

I haven't used HTML5 File API much, so am pretty new to it.

I am trying to get the width and height of a file from the file upload field '#submission-file' field into two variables.

Here is the code I have:

    var fileWidth = 0;
    var fileHeight = 0;
    var url = window.URL || window.webkitURL;
    var fileField = $('#submission-file')[0].files[0];
    var image = new Image();
    image.onload = function() {
        fileWidth = $('#submission-file').width;
        fileHeight = $('#submission-file').height;
    };
    image.src = url.createObjectURL(fileField);

Can anyone show me what I am doing wrong?

This might help: stackoverflow.com/questions/5173796/html5-get-image-dimension — tymeJV
– tymeJV, Commented Jun 13, 2013 at 13:13
@tymeJV That Q&A doesn't explain why he's unable to get the width and height of the file in his onload callback. When the onload callback is called above, the file should be loaded - thus, he should be able to access those properties. — crush
– crush, Commented Jun 13, 2013 at 13:21

A. Wolff · Accepted Answer · 2013-06-13 13:13:50Z

4

You could use this snippet, give you the idea:

http://jsfiddle.net/Mqvgx/

function getImgSize(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#testImg').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$('#testImg').on('load', function () {
    alert($(this).width() + '*' + $(this).height());
})

$("input").change(function () {
    getImgSize(this);
});

edited Jun 13, 2013 at 13:13

answered Jun 13, 2013 at 13:07

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting file width and height with File API

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related