Display Image Immediately from fileUpload Control

Client Side Programming is more efficient for user to very first interection Like Jquery . Now i provide some jquery script to display Image from FileUpload Control directly..

For this purpose we use reference . <script src="../../../JS/JQueryAutocomplete/jquery-1.7.2.js" type="text/javascript"></script>. You just download from jquery.com.

Now code below...

<script language="javascript" type="text/javascript">

/* Write FileUpload Change event .. */


$('#FileUpload1').bind('change', function() {               
                 displayImage(this);
  
                });
//-------------------------//


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

                            reader.onload = function (e) {
                                $('#imgPreview')   /* Selected Image in where will display image*/
                                        .attr('src', e.target.result)
                                        .width(250)   /* Image Width */
                                        .height(220);
                            };

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

  </script>

Enjoy it