制作一个输入类型“文件”隐藏按钮

基本上我想按钮模拟选择时，允许用户上传文件。我读过它的可能的标签，但我需要做的一个按钮做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>

目前我的按钮看起来是这样的： enter image description here 这样：

enter image description here

来源

2015-03-25 Apprentice Programmer

像这样的东西会做：

<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>

来源

2015-03-25 08:57:13

我想你最好能见度= “隐藏” 更改为风格= “显示：无” – 2015-03-25 09:03:17

可以实际上做0，你只需要隐藏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>

来源

2015-03-25 08:57:45 qtgye

注意，它不会对旧工作Android 4.2浏览器。 – 2017-02-20 07:08:02

“for”中的标签Tag和输入标签中的“id”必须匹配。其余的只是造型。 – meles 2017-04-20 09:31:27

尝试的0

opacity:0;

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

加上后备的透明度，如果你有什么支持旧的浏览器

来源

2015-03-25 09:01:07

与美丽的输入文件[简易方法类型=”文件”]。

输出图像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>

来源

2017-07-19 08:41:49 Prafulla

制作一个输入类型“文件”隐藏按钮

回答

相关问题