How to display file name for custom styled input file using jquery?
You need to get name of file when input change and insert it into html. In the code this.files[0].name get name of selected file.
$("#file-upload").change(function(){
$("#file-name").text(this.files[0].name);
});
$("#file-upload").change(function(){
$("#file-name").text(this.files[0].name);
});.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Upload Image
</label>
<input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
<label id="file-name"></label>
</form>Also you can do this work using pure javascript
document.querySelector("#file-upload").onchange = function(){
document.querySelector("#file-name").textContent = this.files[0].name;
}
document.querySelector("#file-upload").onchange = function(){
document.querySelector("#file-name").textContent = this.files[0].name;
}.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}<form>
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Upload Image
</label>
<input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
<label id="file-name"></label>
</form>You can take the file name like this
$('#file-upload')[0].files[0].name
You have to bind and trigger the change event on the [type=file] element and read the files name as:
$('#file-upload').change(function() {
var i = $(this).prev('label').clone();
var file = $('#file-upload')[0].files[0].name;
$(this).prev('label').text(file);
});.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Upload Image
</label>
<input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
</form>You can use this for multiple file upload also
updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
output.innerHTML = '<ul>';
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML += '<li>' + input.files.item(i).name + '</li>';
}
output.innerHTML += '</ul>';
}<input type="file" name="file" id="file" multiple
onchange="javascript:updateList()" />
<br/>Selected files:
<div id="fileList"></div>