Home Asp.net Image Preview Before Upload Using jQuery or JavaScript in Asp.net

Image Preview Before Upload Using jQuery or JavaScript in Asp.net

71
0
Image Preview Before Upload Using jQuery or JavaScript in Asp.net
Image Preview Before Upload Using jQuery or JavaScript in Asp.net

Here in this tutorial, I will explain how to Image Preview Before Upload Using jQuery or JavaScript it to server in .net via fileupload control.

Image Preview Before Upload Using jQuery

First you need to add the file upload control in your html or aspx page:

<div style="width: 300px;">
    <strong>Select Image: </strong> <input type="file" id="fuImage" />
    <br />
    <img id="imgPreview" alt="Preview Image" src="" width="300" height="250" />
</div>

After that, following is the jQuery script which will help us to show preview of uploaded image. You can add it anywhere after jQuery reference or just before closing of html body element. If you haven’t included jQuery Reference in your header section, first you need a add it.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#fuImage').on('change', function () {
            $("img#imgPreview").attr('src', ''); //First remove the image src if already selected
            //To check if uploaded file is image only..
            var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
            if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                alert("Only image files are allowed!");
                return false;
            }
            //To check if browser version IE <= 9, apply image filter type to support <= IE9..
            if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
                var img = $('img#imgPreview')[0];
                img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = $(this).val();
                img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').sizingMethod = 'scale';
            } else {
                //To check 'FileReader' is supported by browser or not..
                if (typeof (FileReader) != 'undefined') {
                    var frImage = new FileReader();
                    frImage.onload = function (e) {
                        $("img#imgPreview").attr('src', e.target.result);
                    }
                    frImage.readAsDataURL($(this)[0].files[0]);
                } else {
                    alert("Your browser does not support FileReader!");
                }
            }
        });
    });
</script>
You May Also Like: You can get more cracking tutorials on Asp.net, JavaScript, jQuery, GridView here.

Image Preview Before Upload – [.aspx]

Following is the complete HTML Markup code to Image preview before upload to server that I used for this demonstration:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Image preview before upload using jQuery</title>
    <style type="text/css">
        img#imgPreview {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#fuImage').on('change', function () {
                $("img#imgPreview").attr('src', ''); //First remove the image src if already selected
                //To check if uploaded file is image only..
                var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
                if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                    alert("Only image files are allowed!");
                    return false;
                }
                //To check if browser version IE <= 9, apply image filter type to support <= IE9..
                if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
                    var img = $('img#imgPreview')[0];
                    img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = $(this).val();
                    img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').sizingMethod = 'scale';
                } else {
                    //To check 'FileReader' is supported by browser or not..
                    if (typeof (FileReader) != 'undefined') {
                        var frImage = new FileReader();
                        frImage.onload = function (e) {
                            $("img#imgPreview").attr('src', e.target.result);
                        }
                        frImage.readAsDataURL($(this)[0].files[0]);
                    } else {
                        alert("Your browser does not support FileReader!");
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="width: 300px;">
            <strong>Select Image: </strong>
            <input type="file" id="fuImage" />
            <br />
            <img id="imgPreview" alt="Preview Image" src="" width="300" height="250" />
        </div>
    </form>
</body>
</html>

As you can see from above code snippet, I added jQuery change event for fileupload control to load the image on file selection.

Now what if you want to upload files to server with validation, display list of uploaded files to gridview and allow users to download that uploaded files? You can check how to upload and download files from server, written by Mayank Modi.

Example Result

Image Preview Before Upload Using jQuery or JavaScript in Asp.net
Image Preview Before Upload Using jQuery or JavaScript in Asp.net
Note: Above code is tested in IE, FF, Chrome and working without any errors but won’t work in Safari browser as it doesn’t support jQuery FileReader.

That’s it!

Previous articleTooltip: Show Hide Hint Help Text Example in CSS3 Transition
Next articleSet Asp.net DropDownList Selected Value in JavaScript
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

two × 2 =