How to validate the image size before uploading?

Question

I want to validate the image size and extension before uploading an image .I have code for image extention and I want to restrict the size of the image. Here is the code for image extension:

function ValidateFileUpload() {
    var fuData = document.getElementById('fileChooser');
    var FileUploadPath = fuData.value;


    if (FileUploadPath == '') {
        alert("Please upload an image");

    } else {
        var Extension = FileUploadPath.substring(
                FileUploadPath.lastIndexOf('.') + 1).toLowerCase();



 if (Extension == "gif" || Extension == "png" || Extension == "bmp"
                || Extension == "jpeg" || Extension == "jpg") {


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

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

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

        } 


  else {
            alert("Photo only allows file types of GIF, PNG, JPG, JPEG and BMP. ");

        }
    }
}

HTML code

<input type="file" name="image"  id="fileChooser" style="height:28px; width:175px;" onchange="return ValidateFileUpload()">

possible duplicate of [How to Preview Image, get file size, image height and width before upload?](http://stackoverflow.com/questions/12570834/how-to-preview-image-get-file-size-image-height-and-width-before-upload) — Mohamad Shiralizadeh, Dec 05 '14 at 06:19

score 8 · Answer 1 · answered Dec 05 '14 at 06:25

8

You can use this code with HTML 5 its tested Demo : Demo for this

<input type="file" id="file" />

var _URL = window.URL || window.webkitURL;

$("#file").change(function(e) {

    var image, file;

    if ((file = this.files[0])) {

        image = new Image();

        image.onload = function() {

            alert("The image width is " +this.width + " and image height is " + this.height);
        };

        image.src = _URL.createObjectURL(file);


    }

});

answered Dec 05 '14 at 06:25

1

is there any possible way to add image size restriction in above extension code??? – stark Dec 05 '14 at 06:34
@indian, what `webkitURL` fallback is for? – mcmxc Jul 22 '19 at 11:18

Rakhita · Accepted Answer · 2014-12-05T10:52:23.333

function ValidateFileUpload() {

var fuData = document.getElementById('fileChooser');
var FileUploadPath = fuData.value;


if (FileUploadPath == '') {
    alert("Please upload an image");

} else {
    var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf('.') + 1).toLowerCase();



    if (Extension == "gif" || Extension == "png" || Extension == "bmp"
                || Extension == "jpeg" || Extension == "jpg") {


            if (fuData.files && fuData.files[0]) {

                var size = fuData.files[0].size;

                if(size > MAX_SIZE){
                    alert("Maximum file size exceeds");
                    return;
                }else{
                    var reader = new FileReader();

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

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

    } 


else {
        alert("Photo only allows file types of GIF, PNG, JPG, JPEG and BMP. ");
    }
}}

MAX_SIZE is the maximum files size you allowed. You can find a good example in the following blog post which was written by me.

html5 file uploading example

score 0 · Answer 3 · answered Dec 05 '14 at 06:46

0

just follow this example http://jsbin.com/ulamor/213/edit?html,css,output

and submit your form when user input files with your desired file size range

answered Dec 05 '14 at 06:46

Aminul

1,738
2
24
42

How to validate the image size before uploading?

3 Answers3