Skip to main content

Show Image Before Submit Using Javascript


As we know Javascript is the most popular scripting language in the world. It is widely used for web pages as a standard language. If a say it is only used for web pages then it would be wrong discription because it is also used in building desktop apps, mobile phone apps and server applications.
Here I'm going to explain you about Simple Javascript code to show image after selecting it and before submiting. It seems to be difficult but believe me its so simple and just few line codes.
You can use this trick for your registration form where user may upload his/her image.

  Content you must need:

  • Html Code.
  • Css Code.
  • Javascript Code.
You can use this trick for your registration form where user may upload his/her image. You also need to attach some ajax js file as indicated in head section.
Here is whole code just copy HTML code and paste it into a notepad file name it and do same for css file and name it "style.css".Place them in same folder and run the html file. You'll surely get your output.


Html & Javascript Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript">
function image(input)
{
if (input.files && input.files[0])
{
var reader= new FileReader();
reader.onload=function (e)
{
$('#box2')
.attr('src',e.target.result)
.width(100).
height(140);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>

<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />

<title> show image </title>
</head>
<body>
<div id="wrapper">
<div id="form">
<table>
<tr>
<td><input type="file" onchange="image(this);" /></td>
<td>            <img id="box2" src="#"  /></td>
</tr>
<tr><td>
<input type="button" id="submit" value="submit" ></button></td>
</tr>
</table>
</div>
</div>
</body>
</html>


Css Code:

#wrapper{
margin:2px 80px 0px 80px;
width:100%;
height:100%;

border:0px solid black;
}
body{

    background-repeat:no-repeat;
    background-color:#04346c;
    }
#form{
background-color:#ddeef6;
font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    font-weight:500;
    text-align:center;
    padding-left:30px;
    height:auto;
    color:#3F849A;
    margin-right:200px;
    margin-left:200px;
    width:70%;
    }
input{
border:1px solid orange;
height:28px;
width:150px;
border-radius:4px;
line-height:30px;
}
input:hover{
border:1px solid green;
}
#btn {
padding-top:2px;
padding-left:5px;
height:26px;
width:60px;
color:#33E6B;;
background-color:#057D9F;
border-radius:8px;
text-align:center;
float:right;
text-align:center;
}
#btn a{
color:#3F849A;
background-color:#057D9F;
text-decoration:none;
text-shadow:blue;
}
#btn:hover{
background-color:#61B7CF;
}

Enjoy this simple and usefull trick to enhance the beauty of your registration form.

Comments

Popular posts from this blog

Network Topologies (Tutorial-4)

Topology refers to the way in which the network of computers is connected. The choice of topology is dependent upon--- Type and number of equipment being used  Planned applications and rate of data transfers  Required response times  Cost Types of Network Topologies Physical Topology: Physical topology defines how devices are connected to the network through the actual cables that transmit data(physical structure of the network)  Logical Topology: Logical Topology (also referred to as Signal Topology) is a network computing term used to describe the arrangement of devices on a network and how they communicate with one another.

Cisco Hierarchical Model

Cisco Hierarchical Model Defined by Cisco to simplify the design, implementation, and maintenance of responsive, scalable, reliable, and cost-effective networks. The 3 layers are logical and not physical – there may be many devices in a single layer, or a single device may perform the functions of 2 layers, eg: core and distribution. The Cisco Hierarchical Model

Windows 7 transformation pack for xp

As the windows 7 launched after that there are lot of screenshot available on the internet, There developer designed the transformation packs for xp to make it better lo0king like windows 7. There are some transformation packs for your xp. Download Vienna 2.5 – Windows 7 Transformation Pack (Mirror) Downloa d HFN Windows 7 Transformation Pack Download Windows 7 Transformation pack – NSFormation (Mirror) Download Vienna Transformation Pack v1