tworzenie typu wejściowego "plik" ukryty za pomocą przycisku

Question

Zastanawiałem się, czy jest to wykonalne? Google wymyśla nic.

Zasadniczo chcę, aby mój przycisk symulował po wybraniu, umożliwiając użytkownikom przesyłanie plików. Czytałem jego możliwości z etykietami, ale muszę to zrobić za pomocą przycisku zrobić 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> 

Obecnie mój przycisk wygląda tak: do tego:

Answer 1

Coś jak to zrobi:

<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

rzeczywiście można to zrobić z label, po prostu musisz ukryć 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

spróbować krycie 0

opacity:0; 

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

powiększonej fallbacks jeśli co do obsługi starszych przeglądarek

Answer 4

Prosta metoda z plików piękny wejściowego [ type = " plik"].

Wyjście URL obrazu - 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>