CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Baltrek
Baltrek

Reputation: 97

get width of uploaded image (before uploading file to server)

I have some code that i changed. It was prevusly to get file ext. I wannted it to get width of uploded image( before even clicking submit input ) and if it's too small giving alert. Problem is that i dont really know how i can connect this js code with html form.

<form id="add" method="POST" enctype="multipart/form-data" action="upload.php">
<input type="file" id= "filput" style="margin-bottom:30px; margin-top:20px;" name="file" size="40" />
</form>


$("#filput").on('change', function () {
    var w = $(this).width();
    if (w < 500) {
        alert("too small");
    } else {
        alert("big");
    }
});

Upvotes: 0

Views: 2400

Answers (1)

Niels
Niels

Reputation: 49959

The this referrs to the input not the image. You have too use the HTML5 file API.

You can use this example: How to get the image width from html 5 file API

Code example: copied from: Getting Image Dimensions using Javascript File API

$("#filput").on('change', function () {
     var fr = new FileReader;

    fr.onload = function() { // file is loaded
        var img = new Image;

        img.onload = function() {
            alert(img.width); // image is loaded; sizes are available
        };

        img.src = fr.result; // is the data URL because called with readAsDataURL
    };

    fr.readAsDataURL(this.files[0]); // I'm using a <input type="file"> for demonstrating
});

Upvotes: 2

Related Questions