像很多人一樣，我想自定義醜陋的輸入類型=文件，並且我知道如果沒有一些黑客和/或JavaScript，就無法完成。但事實是，在我的情況下，上傳文件按鈕僅用於上傳圖像（jpeg | jpg | png | gif），所以我想知道是否可以使用一個「可點擊」的圖像，它將完全充當輸入類型文件（顯示對話框，在提交的頁面上顯示相同的$ _FILE）。
我發現了一些解決方法here和this interesting one（但不適用於Chrome = /）。用圖像替換輸入類型=文件

當你想添加一些風格到你的文件按鈕時，你們做什麼？如果您有任何關於它的觀點，只需點擊答案按鈕;）

2010-05-18 Nicolas

對於這裏所有人來說，http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/也許值得一看。（不以任何方式附屬於該網站，形狀或形式） – CBroe 2016-04-20 14:40:18

我會用SWFUpload或Uploadify。他們需要閃光燈，但可以毫無問題地完成所有你想要的。

任何基於安全原因可以隨時從瀏覽器中刪除嘗試通過除點擊實際控件之外的方式來觸發「打開文件」對話框的任何<input type="file">解決方法。（我認爲在FF和IE瀏覽器的最新版本，就不再可能以編程方式觸發事件。）

來源

2010-05-18 08:29:26

謝謝，我也見過他們，但我認爲他們都需要一個Flash播放器工作，我不想添加另一個強制層給用戶。另外你確定他們會發送與輸入文件完全相同的數據類型嗎？我不想在提交頁面重新測試所有的PHP。乾杯。 – Nicolas 2010-05-18 08:43:14

@niko不，它們的工作方式不同，它們不是表單元素，而是將文件單獨發送到接收腳本，因此您可能必須更改腳本的工作流程。如果這不是一種選擇，我認爲你不可能比Shaun Inman在鏈接到的帖子中做得更好...... – 2010-05-18 08:45:30

恐怕是這樣，那真是一種恥辱。在未來的CSS實現中沒有關於它的任何內容？無論如何感謝回覆:) – Nicolas 2010-05-18 08:47:38

實際上它可以在純CSS來完成，它是很容易...

HTML代碼

<label class="filebutton"> 
Browse For File! 
<span><input type="file" id="myfile" name="myfile"></span> 
</label>

CSS樣式

label.filebutton { 
    width:120px; 
    height:40px; 
    overflow:hidden; 
    position:relative; 
    background-color:#ccc; 
} 

label span input { 
    z-index: 999; 
    line-height: 0; 
    font-size: 50px; 
    position: absolute; 
    top: -2px; 
    left: -700px; 
    opacity: 0; 
    filter: alpha(opacity = 0); 
    -ms-filter: "alpha(opacity=0)"; 
    cursor: pointer; 
    _cursor: hand; 
    margin: 0; 
    padding:0; 
}

的想法是絕對定位您的標籤內部的輸入。將輸入的字體大小設置爲很大，這將增加「瀏覽」按鈕的大小。然後使用負左/上屬性進行試驗和錯誤，將輸入瀏覽按鈕放置在標籤後面。

在定位按鈕，設置透明度爲1.當您完成設置回0（所以你可以看到你在做什麼！）

確保你跨瀏覽器測試，因爲他們」都會使輸入按鈕的大小略有不同。

你可以在這裏看到一個例子（添加軌道按鈕）：http://rakmastering.com/upload/

來源

2010-09-01 16:21:00

感謝託比，爲什麼有'左：-700px;' ？在firefox中，文件輸入字段實際上是在頁面的左側浮動的...它不會粘在標籤跨度上...如果我刪除'left：-700px;'它工作正常 – lisak 2011-05-25 09:05:38

不適用於我...可能失去訂單 – TheBlackBenzKid 2012-02-13 12:53:30

+1謝謝，@Sloin離開：-700px，因爲他想讓瀏覽按鈕在按鈕上，所以光標將是一個指針，而不是文本光標。 – 2012-09-19 18:28:09

本身是隱藏與CSS的知名度輸入：隱藏。

然後，您可以擁有任何您想要的元素 - 錨點或圖片..，當點擊錨點/圖像時，觸發點擊隱藏的輸入字段 - 將出現選擇文件的對話框。

編輯：其實它在Chrome和Safari，我才注意到，是不是在FF4Beta

來源

2011-02-15 06:45:15 Petrunov

184

的情況下，這工作真的很適合我：

<div class="image-upload"> 
    <label for="file-input"> 
     <img src="placeholder.jpg"/> 
    </label> 

    <input id="file-input" type="file"/> 
</div>

隨着造型：

.image-upload > input 
{ 
    display: none; 
}

基本上爲屬性的標籤使它與點擊的標籤相同clickin g指定的輸入。

此外，display屬性設置爲none使得文件輸入根本不會被渲染，隱藏它非常乾淨。

在Chrome中進行測試，但根據網頁應該適用於所有主流瀏覽器。 :)

編輯： 新增的jsfiddle這裏：https://jsfiddle.net/c5s42vdz/

來源

2013-09-14 15:57:47 hardsetting

感謝這款輕巧的解決方案 – teebot 2013-10-03 08:12:49

適合我。很好的解決方案，謝謝 – 2013-11-03 13:14:30

我不確定如果人們仍然認爲它是一個「主要瀏覽器」，但這似乎並不工作在IE7 – Hoppe 2013-11-13 20:21:39

你可以把圖片代替，而像這樣做：

HTML：

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" /> 
<input type="file" id="file1" name="file1" style="display:none" />

JQuery的：

$("#upfile1").click(function() { 
    $("#file1").trigger('click'); 
});

CAVEAT：在IE9和IE10中，如果您通過JavaScript觸發文件輸入中的onclick，表單會被標記爲「危險」，並且不能使用javascript進行submmited，但不知道它是否可以傳統提交。

來源

2014-01-28 05:29:25 ParPar

無法在FF中工作 – gurung 2014-06-08 08:13:51

@gurung爲我工作 – ParPar 2014-06-08 09:29:33

工作代碼：

只是隱藏輸入部分，做這樣的。

<div class="ImageUpload"> 
    <label for="FileInput"> 
     <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/> 
    </label> 

    <input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer; display: none"/> 
</div>

來源

2014-03-25 17:45:56 user3400389

哪裏有readURL（）方法？ – 2017-08-24 18:32:28

這是我的方法，如果我得到你的意思

HTML

<label for="FileInput"> 
    <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" /> 
</label> 
<form action="upload.php"> 
    <input type="file" id="FileInput" style="cursor: pointer; display: none"/> 
    <input type="submit" id="Up" style="display: none;" /> 
</form>

jQuery的

<script type="text/javascript"> 
    $("#FileInput").change(function() { 
     $("#Up").click(); 
    }); 
</script>

來源

2014-04-15 00:21:04 SystemDZ

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
 
<html> 
 

 
<head> 
 
    <title>Simple File Upload</title> 
 
    <meta name="" content=""> 
 
</head> 
 

 
<body> 
 
    <form action="upload.php" method="post" enctype="multipart/form-data"> 
 
    Select image to upload: 
 
    <label for="fileToUpload"> 
 
     <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" /> 
 
    </label> 
 
    <input type="File" name="fileToUpload" id="fileToUpload"> 
 
    <input type="submit" value="Upload Image" name="submit"> 
 
    </form> 
 
</body> 
 

 
</html>

運行代碼片段或只需複製上面的代碼並執行。你會得到你想要的。非常簡單和有效的沒有JavaScript。請享用！！！

來源

2014-12-05 11:12:59 Neocortex

可悲的是，這些方法不適合我在Safari中工作:( – czLukasss 2015-07-23 08:47:05

它很簡單，你可以試試這個：由@hardsetting，

$("#image id").click(function(){ 
    $("#input id").click(); 
});

來源

2016-01-01 10:07:35 Zicsus

的最佳解決方案，但我做了一些改進，使其與Safari瀏覽器（5.1.7）工作在Windows

.image-upload > input { 
 
    visibility:hidden; 
 
    width:0; 
 
    height:0 
 
}

<div class="image-upload"> 
 
    <label for="file-input"> 
 
    <img src="placeholder.jpg" style="pointer-events: none"/> 
 
    </label> 
 

 
    <input id="file-input" type="file" /> 
 
</div>

我曾用「可見性：隱藏，寬度：0」，而不是「顯示：無」爲safari問題，並在img標籤中添加「pointer-events：none」，以便在輸入文件類型標籤位於FORM標籤中時使其工作。似乎在所有主流瀏覽器都適合我。希望它可以幫助別人。

來源

2016-10-25 09:03:56 rishi

用圖像替換輸入類型=文件

回答

HTML

jQuery的

相關問題