rendendo un tipo di input "file" nascosto con il pulsante

Question

Mi chiedevo se questo è fattibile? Google non presenta nulla.

Fondamentalmente voglio che il mio pulsante simuli quando selezionato, consentendo agli utenti di caricare file. Ho letto la sua possibile con le etichette, ma ho bisogno di fare con un pulsante per fare UX/UI

<button style="position:fixed;bottom:10px;right:70px" type="button" class="btn btn-default" > 
<input type="file" id="files" visbility="hidden"/> 
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> 
</button> 

Attualmente il mio tasto appare così: a questo:

Answer 1

Qualcosa di simile lo farà:

<button id="fileup" style="position:fixed;bottom:10px;right:70px" type="button" class="btn btn-default" > 
<input type="file" id="files" visbility="hidden"/> 
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> 
</button> 
<script> 
$('#fileup').click(function() { 
    $('#files').click(); 
}); 
</script> 

Answer 2

si può effettivamente farlo con label, devi solo nascondere il input.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<label for="upload"> 
 
     <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> 
 
     <input type="file" id="upload" style="display:none"> 
 
    </label>

Answer 3

provare un opacità 0

opacity:0; 

http://fiddle.jshell.net/vxu73cyu/4/

più fallback se quello di supportare i browser più vecchi

Answer 4

metodo semplice con file di bella ingresso [ type =" file"].

uscita URL Immagine - https://i.stack.imgur.com/4Jl0H.jpg

input[type="file"] { 
 
\t display: inline-block; 
 
\t opacity: 0; 
 
\t position: absolute; 
 
\t margin-left: 20px; 
 
\t margin-right: 20px; 
 
\t padding-top: 30px; 
 
\t padding-bottom: 67px; 
 
\t width: 85%; 
 
\t z-index: 99; 
 
\t margin-top: 10px; 
 
\t cursor:pointer; 
 
} 
 
.custom-file-upload { 
 
\t position:relative; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
\t padding-top:40px; 
 
\t padding-bottom:40px; 
 
\t background:url(http://www.a-yachtcharter.com/search-fleet/webaccess/assets/img/uploadIcon.png) #fff center center no-repeat; 
 
\t width:91%; 
 
\t border:1px dashed #ff5b57 !important; 
 
\t margin-left:20px; 
 
\t margin-right:20px; 
 
\t margin-top:10px; 
 
\t text-align:center; 
 
}

<input type="file" multiple class="form-control"> 
 
<label for="file-upload" class="custom-file-upload"></label>