Button type="file" pokazujący nazwę wczytywanego pliku

Question

Witam ;)

Mam przycisk button kod poniżej:

<label class="btn btn-default btn-file">
    Browse <input type="file" style="display: none;">
</label>

i chciałbym zrobić, żeby obok pokazywała się nazwa wczytywanego pliku ;) np. baza.csv

 

Z góry dzięki

Answer 1

HTML

<form enctype="multipart/form-data" method="post" role="form" class="form-inline" action="file.php">

<h4>Wgrywanie awizacji</h4>

	
<div class="form-group">
  <input name="file" type="file"  id="my-file-selector" type="file" accept=".csv" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Wybierz plik o rozszeżeniu (.csv)" data-trigger="hover" required>
  <label class="labelik">Wybierz plik ...</label>
 </div> 
 
  
 <div class="form-group">
 <input name="Import" type="submit" class="btn btn-success" value="Dodaj" style="margin-left:190px;"/>
</div>	
	
	
</form>

CSS:

.labelik
{
width:105px;
height:35px;
margin-left:20px;
border-radius: 5px;
background-color:#337ab7;
color:white;
vertical-align: middle; 
display: table-cell;
position:relative;
cursor:none;
}

.labelik:hover
{
width:105px;
height:35px;
margin-left:20px;
border-radius: 5px;
background-color:#286090;
color:white;
vertical-align: middle; 
display: table-cell;
position:relative;
cursor:pointer;
}

#my-file-selector
{
position:absolute;
}

JS:

 <script>
 $(".labelik").bind("click",function(){
 
 $("#my-file-selector").click();
 
 });
 </script>

Działa ;)