Как показать, какой файл выбран в файле типа ввода?

Question

Используя этот код ниже, я редактирую стиль моей кнопки INPUT TYPE FILE. Проблема, которую я сейчас получаю, заключается в том, что она не показывает, какой файл был выбран пользователем. Я не знаю, как это сделать .. :(

HTML код:

<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; 
} 

Вот JSFIDDLE URL: http://jsfiddle.net/sunita1993/avn9n6sp/

Answer 1

Пожалуйста, проверьте следующий код, надеемся, что он будет работать :)

$('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

Вы можете сделать это, используя javascript. Я дал вам пример, используя каркас JQuery:

$(function() { 

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

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

    }); 

}); 

При выборе файла вводимого значение будет меняться, вы можете получить доступ к файлу, file переменным будет содержать объект с данными из файла, и вы можете получить то, что вам нужно от него и положил его на span элемент или где вы хотите

пример на JsFiddle