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.
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%;
}
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;
}
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;
}
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
Post a Comment
your Comment is sent for moderation, Thankyou