jQuery to Show Image Preview after Validating Image Size and Type Before Upload in Asp.net

Datetime:2016-08-22 22:08:43          Topic: ASP.NET  jQuery           Share

Introduction : In this article I have explained How to validate image size and type of the file using jquery before actually uploading on server. Image preview will also be shown if image is of specified size and type.

In previous articles i explained How to  Maintain image on postback in fileupload control in asp.net and  Drag & drop to upload multiple files using ajaxfileupload like facebook in asp.net  and  Resize image in asp.net and  Validate, upload, crop and store image in folder in asp.net using jquery and  Upload, save image in folder and path in sql server database and retrieve using asp.net

Description : It is very common requirement while working on asp.net project to upload image files   e.g. jpg, jpeg, png, bmp, gif etc.  I got the same requirement where user can upload images. But I have to restrict user to upload only certain type of imagesand of up to specified size.

Actually this can be done both server side and client side. But to check the file type or size of file at server size through code, file must be first uploaded into server memory which is time consuming if the size of the file is large. So it will definitely degrade the performance of our application. To overcome this problem we can validate file type and size at client side using jQuery before actually uploading the image.

Implementation : Let’s create a sample page to demonstrate the concept

HTML Source

< html xmlns ="http://www.w3.org/1999/xhtml">

< head runat ="server">

< title ></ title >

< style type ="text/css">

.error {

background-color : #d9534f ;

font-weight : 300 ;

font-size : 12px ;

padding : 3px 6px 3px 6px ;

color : #fff ;

text-align : center ;

white-space : nowrap ;

}

</ style >

< script src ="http://code.jquery.com/jquery-1.11.3.js" type ="text/javascript"></ script >

< script type ="text/javascript">

//Validate image size before upload

function validateTypeAndSize(uploadCtrl) {

// Get uploaded file extension

var extension = $(uploadCtrl).val().split( '.' ).pop().toLowerCase();

// Create array with the files extensions that we wish to upload

var validFileExtensions = [ 'jpeg' , 'jpg' , 'png' , 'bmp' ];

//Check file extension in the array.if -1 that means the file extension is not in the list.

if ($.inArray(extension, validFileExtensions) == -1) {

$( '#spnMessage' ).text( "Sorry!! Upload only jpg, jpeg, png, bmp image" ).show();

// Clear fileuload control selected file

$(uploadCtrl).replaceWith($(uploadCtrl).val( '' ).clone( true ));

//Disable Submit Button

$( '#btnSubmit' ).prop( 'disabled' , true );

//Clear Image preview

$( '#imgPreview' ).prop( 'src' , '' );

}

else {

// Check and restrict the file size to 32 KB.

if ($(uploadCtrl).get(0).files[0].size > (32768)) {

$( '#spnMessage' ).text( "Sorry!! Max allowed image size is 32 kb" ).show();

// Clear fileuload control selected file

$(uploadCtrl).replaceWith($(uploadCtrl).val( '' ).clone( true ));

//Disable Submit Button

$( '#btnSubmit' ).prop( 'disabled' , true );

//Clear Image preview

$( '#imgPreview' ).prop( 'src' , '' );

}

else {

//Clear and Hide message span

$( '#spnMessage' ).text( '' ).hide();

//Enable Submit Button

$( '#btnSubmit' ).prop( 'disabled' , false );

//Preview Image if valid

previewImage(uploadCtrl);

}

}

}

//Preview image before upload

function previewImage(input) {

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

var reader = new FileReader();

reader.onload = function (e) {

$( '#imgPreview' )

.attr( 'src' , e.target.result)

.width(200)

.height(150);

};

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

}

}

</ script >

</ head >

< body >

< form id ="form1" runat ="server">

< div style =" text-align : center">

< asp : Image ID ="imgPreview" Height ="150px" Width ="200px" runat ="server" ClientIDMode ="Static" />< br />

< asp : FileUpload ID ="FileUpload1" runat ="server" onchange ="validateTypeAndSize(this)" />< br />

< br />

< asp : Button ID ="btnSubmit" runat ="server" Text ="Submit" Enabled ="false" ClientIDMode ="Static" />< p >

< span id ="spnMessage" class ="error" style =" display : none ; "></ span ></ p >

</ div >

</ form >

</ body >

</ html >

Explanation :  User can now upload file of   jpg, jpeg, png, gif, bmp   type and up to 32 kb size. If user selects any other file or large file than the specified limit then appropriate message will be displayed to user and submit button will be disabled. When a valid file of up to specified size is uploaded then submit button will be enabled and image preview will be shown.

Note : I have restricted user to upload up to 32kb file. If you want to restrict the file size to 2 mb then replace 32768 with 1024*1024*2 in above jquery script.

Now over to you:

A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and  If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.  





About List