создание типа ввода «файл», скрытый кнопкой

Question

Мне было интересно, возможно ли это? Google ничего не придумал.

В основном я хочу, чтобы моя кнопка имитировалась, когда она была выбрана, что позволяет пользователям загружать файлы. Я прочитал его можно с наклейками, но мне нужно сделать с помощью кнопки, чтобы сделать 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> 

В настоящее время моя кнопка выглядит следующим образом: к этому:

Answer 1

Что-то, как это будет делать:

<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

Вы действительно можете сделать это с label, вам просто нужно скрыть 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

попробовать непрозрачность 0

opacity:0; 

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

плюс откаты, если вы что поддержка старых браузеров

Answer 4

Простой метод с красивой входной файл [ тип =» файл"].

Выход URL изображения - 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>