I need to customize a file-type input, but all the examples I've found seem to be tricky and do not work with multiple, rs It needs to look like this:
Is there a way to do it with CSS?
Hello, with CSS you will not be able to. I've put together a simple way to do what you want with jQuery and CSS link
$(function(){
$('#upload').on('change',function(){
var numArquivos = $(this).get(0).files.length;
if ( numArquivos > 1 ) {
$('#texto').val( numArquivos+' arquivos selecionados' );
} else {
$('#texto').val( $(this).val() );
}
});
});
#teste { position:relative; }
#upload { position:absolute; top:0;left:0; border:1px solid #ff0000; opacity:0.01; z-index:1; }
#texto { border:0px; background:#dedede; border-radius:4px; padding:5px; }
#botao { border:1px solid #dedede; background:#989898; color:#ffffff; border-radius:4px; padding:5px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="teste">
<input type="file" multiple="multiple" id="upload" />
<input type="text" id="texto" />
<input type="button" id="botao" value="Enviar" />
</div>
Att.
I suggest doing so:
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
#multiple_upload {
position:relative;
}
#uploadChange {
position:absolute;
top:2px;
left:0;
opacity:0.01;
border:none;
width:355px;
padding:10px;
z-index:1;
cursor:pointer
}
#message {
border:2px solid #ccc;
background:#fff;
padding:10px;
font-family:'Open Sans';
width:250px;
float:left;
margin:4px;
overflow:hidden;
color: #333
}
#botao {
border:1px solid #ff7b00;
background:#ff7b00;
color:#ffffff;
font-family:'Open Sans';
font-size:15px;
font-weight:bold;
padding:12px 28px;
margin:4px 8px;
}
#multiple_upload:hover > #botao {
background:#662f00;
border-color:#662f00;
}
#lista ul {
margin-left: -16px;
}
#lista ul li {
border-bottom:1px solid #eee;
padding:10px;
}
<div id="multiple_upload">
<input type="file" multiple="multiple" id="uploadChange" />
<div id="message"><span>Selecionar fotos</span></div>
<input type="button" id="botao" value="Upload" />
<div id="lista">
</div>
</div>
$(function(){
$('#uploadChange').on('change',function(){
var totalFiles = $(this).get(0).files.length;
if(totalFiles == 0) {
$('#message').text('Selecionar fotos' );
}
if ( totalFiles > 1) {
$('#message').text( totalFiles+' arquivos selecionados' );
} else {
$('#message').text( totalFiles+' arquivo selecionado' );
}
var htm='<ul>';
for (var i=0; i < totalFiles; i++) {
htm += '<li>'+$(this).get(0).files[i].name+'</li>'+"\n";
}
htm += '</ul>';
$('#lista').html(htm);
});
});
The example can be checked here
Note: If you want, there is also a drag and drop option.
Click here to download the example . And if you have bootstrap, this Upload Plugin it's also very good.
Friends, you can do with css.
Here's an example I've made for you, see if you can.
I did the following, I created a div with input file and a common button inside. You do not need to create your own button.
#div-input-file{
height:28px;
width:385px;
margin:0px;
}
#div-input-file #file-original{
opacity: 0.0;
-moz-opacity: 0.0;
filter: alpha(opacity=00);
font-size:18px;
}
#div-input-falso{
margin-top:-28px;
display:inline;
}
#triggerFile{
display:inline;
min-height:28px;
background-color:#F58220;
border:0px;
margin:0px;
font-weight:normal;
color:#fff;
}
#div-input-falso #file-falso{
width:265px;
height:22px;
font-size:18px;
font-family: Verdana;
}
<div id="div-input-file">
<input name="file-original" type="file" size="30" id="file-original" onchange="document.getElementById('file-falso').value = this.value;"/>
<div id="div-input-falso">
<input name="file-falso" type="text" id="file-falso" /></div>
<input type="button" id="triggerFile" value="UPLOAD"/>
</div>
</div>
It's just a quick fix, see if you can.
Hugs