Preview Image files before uploading using Jquery & Html5

Here is a simple script to preview the image files before saving them using jquery & html5

First create a html page and put below fiel upload button and an preview div in it :-

<input type="file" id="imageUpload3" onchange="previewimg(this)" />  
   <br />  
   <div id="dvPreview3" style="margin-top: 40px;">  
   </div>  

Now we write the Jquery function as below :- 

<script>
    function previewimg(evt) {
        var regex = /^([a-zA-Z0-9\s_\\.\-:()])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
        if (regex.test($(evt).val().toLowerCase())) {
            if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
                alert("This browser does not support FileReader.");
            }
            else {
                if (typeof (FileReader) != "undefined") {
                    $("#dvPreview3").show();
                    $("#dvPreview3").html("<img/>");
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("#dvPreview3 img").attr("src", e.target.result);
                    }
                    reader.readAsDataURL($(evt)[0].files[0]);
                } else {
                    alert("This browser does not support FileReader.");
                }
            }
        } else {
            alert("Please upload a valid image file.");
            $('#imageUpload3').val('');
        }
    }  
</script>  

Now, once you browse images using fileupload control, you can preview images in the bottom div.

Hope this will be helpful!