Change input text type=file with filename

Question

I am doing a project in Asp.net MVC 5, and I need the text of my input type 'file' to change to the name of the file when loading it. I hid the input to be triggered by clicking on label in CSS as below:

HTML:

 <div class="form-group">
     <label for="fupload" class="control-label label-bordered">Clique aqui para escolher um arquivo</label>
     <input type="file" id="fupload" name="fupload" class="fupload form-control" />
 </div>

CSS:

input[type="file"] { 
   display: none; 
}

.label-bordered {
   border: 1px solid #cecece;
   padding: 10px;
   border-radius: 5px;
}

Stayed like this:

Someone can give me a light?

Answer 1

Follow a simple example, so you can make an adaptation.

Document

 <div class="form-group">
     <label for="fupload" class="control-label label-bordered">Clique aqui para escolher um arquivo</label>
     <div class="nomeArquivo"></div>
     <input type="file" id="fupload" name="fupload" class="fupload form-control" />
 </div>

Javascript + JQUERY

$(function () {
    $('#fupload').change(function() {
         $('.nomeArquivo').html('<b>Arquivo Selecionado:</b>' + $(this).val());
    });
});