如何隱藏在HTML文件中的文本字段上傳

我想知道如何隱藏一個標準的HTML文件上傳標籤的文本字段部分如何隱藏在HTML文件中的文本字段上傳

例如

<input type="file" name="somename" size="chars">

這會產生明顯的文本字段和未來到該字段是一個瀏覽按鈕...我想隱藏文本字段的一部分，但保持按鈕。

來源

2010-01-09 dswatik

我建議隱藏整個事物並放置一個單獨的按鈕對象，點擊後最終會點擊輸入的瀏覽按鈕。

你可以用CSS和javascript做到這一點 - check out this article（實際上是我今天第二次使用這個參考）。

來源

2010-01-09 20:32:37

感謝這正是我一直在尋找。 – dswatik 2010-01-09 21:41:49

這似乎不適用於IE。上傳開始後，IE會輸出一個錯誤。 – Raj 2012-05-02 20:54:19

工作於IE10。 IE9及以下版本不允許通過JS來緩和文件輸入字段。 – 2013-09-23 08:37:10

您可以將圖像作爲按鈕的背景。前段時間對我有用。

來源

2010-01-09 20:34:31 ksemeks

file輸入按鈕是非常難以風格和操縱，主要是出於安全原因。

如果確實需要自定義您的上傳按鈕，我建議像SWFUpload或Uploadify一個基於Flash的上傳，使您可以使用自定義圖像按鈕，顯示一個進度條，和其他的東西。

然而，其基本理念不同於將控件嵌入到表單中。上傳過程分開進行。請確保您先檢查這是否適用於您。

來源

2010-01-09 20:40:45

謝謝，但不幸的是我被鎖定到我的客戶設計網站的方式..這是一個簡單的圖像按鈕，以提高文件對話框。 – dswatik 2010-01-09 21:43:31

這可以使用Flash上傳器相當可靠地完成。但是，如果Shaun Inman的文章有效並且優雅地降級，那應該很好。 – 2010-01-09 22:06:18

input[type="file"] { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0 265px 22px 155px); } /* Hide input field */ 
@-moz-document url-prefix() 
    { 
    input[type="file"] { clip: rect(0, 265px, 22px, 125px); } /* Mozilla */ 
    } 
* > /**/ input[type="file"], x:-webkit-any-link { clip: rect(0, 86px, 22px, 0); } /* Webkit */

這樣做沒有JavaScript一樣的，但需要絕對定位使用clip屬性。

參考

來源

2012-01-03 19:41:58

這必將工作，我已經在我的設計項目中使用它希望這有助於:)

<input type="file" id="selectedFile" style="display: none;" /> 
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

來源

2013-02-11 06:01:26 shiba

偉大的只是我需要的;） – 2013-05-17 10:28:12

將無法在IE9及以下。 – 2013-09-23 08:37:42

在Android設備上無法使用Chrome瀏覽器 – Ross 2014-07-15 05:39:20

DEMO

純CSS和HTML

訣竅是使用輸入文件按鈕上方的按鈕。

另外，你應該設置

filter: alpha(opacity=0);

輸入文件。

來源

2014-06-26 11:01:06

您可以隱藏整個元素並顯示按鈕或鏈接。這很容易。

<input type="file" name="file" id="fileupload" style="width:200px; display:none;" onchange="submitmyform();" /> 
<input type="button" value="Select an Image" onclick="$('#fileupload').click();" />

隱藏文件上傳元素。該按鈕將觸發單擊事件並顯示文件瀏覽器窗口。在選擇一個文件時，更改事件被觸發，這可以提交表單或調用腳本函數，無論如何。

希望這有助於...

來源

2015-06-02 12:32:16

不會在任何回答中提到的最簡單的方法是使用一個label爲input。

<input type="file" name="myFile" id="myFile"> 
<label for="myFile">Choose your file</label> 

input[type="file"] { display: none; }

使用label將很有用，因爲點擊標籤點擊輸入。只有當輸入的id等於標籤的for屬性時，此功能纔有效。

來源

2016-01-11 17:34:12

如果您正在使用jQuery，來看看這個插件 - https://github.com/ajaxray/bootstrap-file-field

它會顯示文件的輸入字段作爲引導按鈕，將顯示出精美選定的文件名。此外，您可以使用js中的簡單數據屬性或設置來設置各種限制。
e，g，data-file-types="image/jpeg,image/png"將限制選擇除jpg和png圖像以外的文件類型。

來源

2016-06-08 20:10:22 Anis

嘗試加入這個CSS的輸入

font-size: 0;

來源

2016-12-06 17:47:26 nimatra

如何隱藏在HTML文件中的文本字段上傳

回答

相關問題