製作一個輸入類型「文件」隱藏按鈕

基本上我想按鈕模擬選擇時，允許用戶上傳文件。我讀過它的可能的標籤，但我需要做的一個按鈕做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

製作一個輸入類型「文件」隱藏按鈕

回答

相關問題