How to show which file is selected in Input type File?

Question

Using this code below, I edit the style of mine INPUT TYPE FILE button. The problem I am getting now is its not showing which file user had selected. I don't know how to do this.. :(

HTML Code:

<div class="giz-upload">
<input type="file" size="40" name="d4p_attachment[]">
</div>

Style.css

div.giz-upload{
    width: 157px;
    height: 57px;
    background: url(http://www.gizmoids.com/wp-content/sicons/upload.png);
background-size: 80px 60px;
background-repeat:no-repeat;
overflow: hidden;
}

div.giz-upload input {
    display: block !important;
    width: 157px !important;
    height: 57px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

Here is JSFIDDLE URL : http://jsfiddle.net/sunita1993/avn9n6sp/

Answer 1

Please check the following code, hope it will work :)

$('input[type=file]').change(function (e) {
    $(this).parents('.giz-upload').find('.element-to-paste-filename').text(e.target.files[0].name);
});

.giz-upload {
    display: block !important;
    height: 57px !important;
    background: url(http://www.gizmoids.com/wp-content/sicons/upload.png);
    background-size: 80px 60px;
    background-repeat:no-repeat;
    padding-left: 90px; 
}
.giz-upload input {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<label class="giz-upload">
    <input type="file" size="40" name="d4p_attachment[]" />
    <span class="element-to-paste-filename"></span>
</label>