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.
Labels:

Comments

Post a Comment

your Comment is sent for moderation, Thankyou

Popular posts from this blog

OSI Model (Tutorial-6)

What is the OSI model ? Open Systems Interconnection model is fundamental to all communications between network devices.  Developed in 1974 by ISO after the American Department of Defence began using the TCP/IP suite of protocols.  Finally adopted in 1977. It is now the theoretical model for how communication takes place between network devices. What are the seven layers ? Layers OSI Model Layer 7  Layer 6  Layer 5  Layer 4  Layer 3  Layer 2  Layer 1
Post a Comment
Read more

Eden: PHP Library To Get Things Easy For PHP Developer

Eden is PHP Library designed for helping developers in their rapid development work. In Our most of the project we have to integrate our developed website or application with most of  the social networking websites like Google, Facebook, Twitter, yahoo etc. so what we do is we integrate libraries of different websites differently Although We could make the code reusable but still if the websites increases then confusion will also increases. Adding different libraries form different sources add more complexity to your project and ends up to be hard to maintain. Eden simply a set of reusable components, that works with any PHP framework and CMS. Eden makes code logical and readable with dead simple syntax. Eden Will work With Most Of Web services including Amazon Web service Facebook Foursquare Google twitter tumbler Paypal Yahoo You could Download the File From  Eden Official Website  and Can use this will just a simply including this...
2 comments
Read more

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.
Post a Comment
Read more