Image Preview Before Upload Using jQuery

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>