Preview of image before upload using java script and JQuery


In This article, we show the image before upload that means we does not need to send the image in the database then we will see it. Using this code we can see the image without sending the image path in database. Here we use a file upload control tool of asp.net and I have call on the change event ,I have called the ImgShow(this) function.
Source Code:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="imagepreview.aspx.cs" Inherits="imagepreview" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server">
    <title>Image Preview before upload using jquery/javacript</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 ImgShow(ImgShow) {
            if (navigator.appName != "Netscape") {
                var imgpreviewzone = document.getElementById("imgpreviewzone");
                imgpreviewzone.style.display = "";
                imgpreviewzone.style.width = "300px";
                imgpreviewzone.style.height = "300px";
            }
            else {
                if (ImgShow.files && ImgShow.files[0]) {
                    var reader = new FileReader();
                    $('[id*=imgpreview]').css("display", "block");
                    reader.onload = function (e) {
                        $('#imgsrc')
                    .attr('src', e.target.result)
                    .width(300)
                    .height(300);
                    };
                    reader.readAsDataURL(ImgShow.files[0]);
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="UploadFile" runat="server" onchange="ImgShow(this)" />
        <div id="imgpreviewzone">
        </div>
        <div id="imgpreview" style="display: none;">
            <img id="imgsrc" />
        </div>
    </div>
    </form>
</body>
</html>


Out-Put:-


Preview of image before upload using java script and JQuery Preview of image before upload using java script and JQuery Reviewed by NEERAJ SRIVASTAVA on 10:28:00 AM Rating: 5

3 comments:

Powered by Blogger.