Change text of input type = file with filename

Question

Change text of input type = file with filename

Navigation

#1 by (2 votes)

1

I'm doing a project in ASP.NET MVC 5, and I need the text of my input of type 'file' to change to the name of the file when loading it. I've hidden the input so it can 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;
}

It looks like this:

Can someone give me a light?

javascript html jquery css

asked by anonymous 19.07.2017 / 20:01

1 answer

For the same value last time it was used [closed] Login Spring Boot + Spring Secutrity + Angular

score 2 · Accepted Answer

Here's 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());
    });
});