Custom input file

custom-input-file

$(function () {
    $('_btnBrowse').click(function (e) {
        e.preventDefault();
        $('#inputUpload').click();
    });

    $('#inputUpload').change(function () {
        var filename = $('input[type=file]').val().split('\\').pop();
        var setContent = $('.inputFile').html(filename);
    });
});

markup

<form>
    <span class="inputFile">nie wybrano pliku...</span>
    <input type="file" name="file" id="inputUpload">
</form>
<span class="_btnBrowse">Przeglądaj</span>

style

.inputFile{
    border: 1px solid #ccc;
    padding: 5px 20px;
    display: inline-block;
    background-color: #eee;
    cursor: default;
}
#inputUpload{
    opacity: 0;
    visibility: hidden;
    width: 5px;
    position: absolute;
    right: 0;
    top: 0;
}
.btnBrowse{
    display:inline-block;
    background-color: #ca7fd1;
    color: #fff;
    padding: 5px 10px;
    margin-top: 10px;
    cursor: pointer;
}