Image Preview Before Upload Using jQuery

In this tutorial we will learn how to show Image Preview Before Upload Using jQuery. Here we are using jQuery to accomplish this.

Design:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Image Preview Before Upload Using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
    function showimagepreview(input) {
        if (input.files && input.files[0]) {
            var freadr = new FileReader();
            freadr.onload = function (e) {
                $('#imagepreview').attr('src', e.target.result);
            }
            freadr.readAsDataURL(input.files[0]);
        }
    }
</script>
<style type="text/css">
body
 {
 width: 980px;
 margin: 0px auto;
 text-align: center;
 padding-top: 50px;
 font-size: 20px;
 }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>Image Preview Before Upload Using jQuery</h2>
<br /><br />
<Input type="file" name="filUpload" id="filUpload" onchange="showimagepreview(this)" />
<br /><br />
<img id="imagepreview" />  
<br /><br />
All rights reserved by <a href="http://www.hightechnology.in">www.Hightechnology.in</a> |
     Hosting partner <a href="http://www.grootstech.com" target="_blank">Grootstech</a>  
</div>
</form>
</body>
</html>