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>

Answer 2

You can do it using javascript. I let you an example using the jQuery framework:

$(function() {

    $("input").on("change", function() {

        var file = this.files;
        console.log(file);

    });

});

When you select a file the input value will change you can get access to the file, file variable will contain an object with the data from the file and you can get what you need from it and put it on a span element or where you want

An example on JsFiddle

Answer 3

Because in div.giz-upload input you have set the opacity property to 0.

Remove opacity and it will show file's name.