Post
Ask Question

Preview Image before saving using Jquery

HTML  -
  1. <input type="file" id="imageUpload3" onchange="previewimg(this)" />  
  2.    <br />  
  3.    <div id="dvPreview3" style="margin-top: 40px;">  
  4.    </div>  
 
Jquery function -  
  1. <script>  
  2.        function previewimg(evt) {  
  3.            var regex = /^([a-zA-Z0-9\s_\\.\-:()])+(.jpg|.jpeg|.gif|.png|.bmp)$/;  
  4.            if (regex.test($(evt).val().toLowerCase())) {  
  5.                if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {  
  6.                    alert("This browser does not support FileReader.");  
  7.                }  
  8.                else {  
  9.                    if (typeof (FileReader) != "undefined") {  
  10.                        $("#dvPreview3").show();  
  11.                        $("#dvPreview3").html("<img/>");  
  12.                        var reader = new FileReader();  
  13.                        reader.onload = function (e) {  
  14.                            $("#dvPreview3 img").attr("src", e.target.result);  
  15.                        }  
  16.                        reader.readAsDataURL($(evt)[0].files[0]);  
  17.                    } else {  
  18.                        alert("This browser does not support FileReader.");  
  19.                    }  
  20.                }  
  21.            } else {  
  22.                alert("Please upload a valid image file.");  
  23.                $('#imageUpload3').val('');  
  24.            }  
  25.        }  
  26.    </script>  
Once you browse images using fileupload control, you can preview images in the bottom.