Show image Preview before upload using JavaScipt and JQuery



Introduction :
      Here i will code you how to Preview the Image before uploading, from the client side script. Compatible to all the major browsers. Here on selecting the file from the fileupload control, i will display the image in the div tag,can display in image control too. Here i have written two types of code one for all the browsers and other for FireFox.

ASPX Code :


<!DOCTYPE html >
<html>
<head id="Head1" runat="server">
<title>Fourthbottle.com</title>
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
        function ImagePreview(ImagePreview) {
            if (navigator.appName != "Netscape") {
                var previewzone = document.getElementById("previewzone");
                previewzone.style.display = "";
                previewzone.style.width = "250px";
                previewzone.style.height = "250px";
            }
            else {
                if (ImagePreview.files && ImagePreview.files[0]) {
                    var reader = new FileReader();
                    $('[id*=ForFF]').css("display", "block");
                    reader.onload = function (e) {
                        $('#FFImg')
                    .attr('src', e.target.result)
                    .width(250)
                    .height(250);
                    };
                    reader.readAsDataURL(ImagePreview.files[0]);
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="UploadFile" runat="server" onchange="ImagePreview(this)" />
        <div id="previewzone">
        </div>
        <div id="ForFF" style="display: none;">
            <img id="FFImg" alt="your image" />
        </div>
    </div>
    </form>
</body>
</html>