Tags

, , , ,

12049329_1197054443643486_8193997852542435752_n

HTML:

<div class="addFileStyle">
    <input type="file" />
</div>

 

Step 1: Add this Jquery function

function xfilebrowse(tgt){  
    $(tgt+' input[type=file]').each(function() {
        $(this).wrap('<div class="upldwrap" />');
        $(this).parent().append('<input type="text" /> <input type="button" value="Browse" class="grey_btn" />');
        $(this).css('opacity', 0);
        $(this).on('change', function() {
            var txt = $(this).val();
            txt = txt.replace(/\\/g, '/').replace(/.*\//, '');
            $(this).siblings('input[type=text]').val(txt);
        })
    });
}

 

Step 2: Add this default css 

.addFileStyle {
background:#efefef;
margin-bottom:10px;
padding:20px 25px;
}
.addFileStyle h4 {
font-size:17px;
font-weight:700;
}
.addFileStyle .upldwrap {
position:relative;
margin-bottom:5px;
}
.addFileStyle .upldwrap:after {
content:"";
display:table;
clear:both;
}
.addFileStyle .upldwrap input[type=file] {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:10;
cursor:pointer;
}
.addFileStyle .upldwrap input[type=text] {
background:#fff;
border:1px solid #d5d5d5;
width:60%;
margin:0;
padding:10px 2%;
}
.addFileStyle .upldwrap input[type=button] {
float:right;
width:30%;
height:36px;
box-sizing: border-box;
}

 

Step 3: Now you have to call the function to apply custom file browse

$(function(){
     /* xfilebrowse([parent element class name or id]); */
     xfilebrowse('.addFileStyle');
});

 

Click Here To See Working Example

 

Advertisements