Custom File Browse

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  Continue reading “Custom File Browse”

Advertisements