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

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:-
Stylish File button


Styling the file upload button using CSS and Jquery Styling the file upload button using CSS and Jquery Reviewed by NEERAJ SRIVASTAVA on 8:25:00 PM Rating: 5

No comments:

Powered by Blogger.