Styling the file upload button using CSS and Jquery
Now days everything is beautiful or stylish. Every
client has a demand that he want more beautiful web site as the previous. So in
this article I have design more stylish a button that work as a file uploader.
For more:-
Change TextBox Background color on Focus using CSS, Stylish Button using only css, Stylish Textbox using CSS ,How to set box shadow for div using CSS, Open pop up image on page load using jquery and css.
Design:-
Source Code:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Button as
a file upload using Jquery</title>
<style type="text/css">
.button
{
background:
#991b1e;
color:
#fff;
padding:
10px 15px;
border-radius:
5px;
}
.button:hover
{
background:
#70b64d;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function
() {
$("#fileupload1").change(function () {
$("#filename").html($("#fileupload1").val().substring($("#fileupload1").val().lastIndexOf('\\') + 1));
});
});
</script>
</head>
<body>
<form id="form1">
<div>
<br />
<input style="display: none" type="file" id="fileupload1" />
<input type="button" class="button" id="btnUpload" onclick='$("#fileupload1").click()'
value="Upload a file" />
<span id="filename"></span>
</div>
</form>
</body>
</html>
Out-Put:-
Styling the file upload button using CSS and Jquery
Reviewed by NEERAJ SRIVASTAVA
on
8:25:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
8:25:00 PM
Rating:
No comments: