Customize input type file tag with CSS and Jquery

Share the love!
Customize input type file tag with CSS and Jquery

Hello Friends if u are a regular reader of my blog u know previously i posted about How to redirect a url using .htaccess and now its time to share another post. today we will see how can we customize input type file tag with CSS and Jquery, because this tag does not same in all browsers like in IE so can make it proper as we want!

Here is the method how we can customize input type file tag.

What we will do is we will hide the input type file tag and display another button then when user will click that button with the help of jquery we will trigger the input type file button and for file name we will make another element and then when file will be selected the file name will be extracted and places in our element so now we can customize input type file tag easily Hope it will work and if u have any better way to do this please share it in comment :)

Lets have a look -

#upload {
    background: #333;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-family: sans-serif;
    margin: 0 10px 0 0;
}
#upload:hover {
    background: #51A8CA;
}
#filename {
    font-size: 20px;
    font-style: italic;
}
<div class="wrp">
<input style="display:none" type="file" id="fileinput"/>
<span class="button" id="upload">upload file</span>
<span id="filename"></span>
</div>
$( function() {
    $('#upload').click(function(){
       $("#fileinput").click();
    });
    $("#fileinput").change(function(){          
    $("#filename").html(
       $("#fileinput").val().substring(
           $("#fileinput").val().lastIndexOf('\\')+1));
    });
});

Comment with-

Disqus Blogger Google Facebook

0 comments:

Post a Comment

Comments :