輸入類型=文件只顯示按鈕

15

這將是非常困難的。文件輸入類型的問題在於它通常由兩個可視元素組成，而被視爲單個DOM元素。除此之外，幾個瀏覽器對文件輸入有自己獨特的外觀和感覺，並且你被設置爲惡夢。有關文件輸入具有的怪癖，請參閱此article on quirksmode.org。我保證你不會讓你開心（我從經驗中說出）。

[編輯]

其實，我想你可能有把你輸入一個容器元素（比如一個div），並增加陰性切緣的元素脫身。有效地將文本框部分隱藏在屏幕外。另一種選擇是在我鏈接的文章中使用該技術，嘗試將其設置爲按鈕樣式。

來源

2009-07-05 22:10:36

+4

上怪異模式這篇文章是偉大的。樣式文件輸入仍然是一個痛苦。：P – MitMaro 2009-07-05 22:12:14

+0

一旦你考慮到不同的瀏覽器風格和最小字體大小因用戶而異，我不認爲所包含的netagive-margin會很好地工作。 – joebert 2009-07-06 08:58:04

+1

joebert：我同意，我認爲最好的選擇仍然是在quirksmode文章中顯示的技術，這是多麼痛苦的黑客... – 2009-07-06 09:22:52

1

伊夫這個一個非常哈克解決方案......

<style type="text/css"> 
    input[type="file"] 
    { 
     width: 80px;   
    } 
</style> 

<input id="File1" type="file" />

問題是隱藏的文本字段將obvously瀏覽器之間變化的寬度屬性時，Windows XP主題等有所不同。也許它的東西，你可以工作，雖然...

來源

2009-07-05 22:20:36

+0

即使這個不會在IE6上工作，瀏覽器不理解屬性選擇器。 – 2009-07-05 22:23:30

+0

啊，哦，從來沒有:) – 2009-07-06 05:48:24

+2

似乎並沒有工作在FF 3.6.6要麼 – Shoan 2010-07-09 20:12:17

1

解決下面的代碼：

<div style="overflow: hidden;width:83px;"> <input style='float:right;' name="userfile" id="userfile" type="file"/> </div>

來源

2010-10-11 10:38:08 druveen

2

我的解決方案僅僅是一個div內設置類似「druveen」之稱，不過，我的廣告我自己的按鈕樣式的div（使它看起來像一個按鈕：懸停），我只是設置樣式「不透明度：0;」到輸入。對我來說是一種魅力，希望它對你也一樣。

來源

2011-04-19 16:09:26 ThomasG

10

修復了所有的瀏覽器解決：

 <input type = "button" value = "Choose image" 
     onclick ="javascript:document.getElementById('imagefile').click();"> 
     <input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>

我在FF已經測試，Chrome的& IE - 做工精細，樣式的應用也：d

來源

2011-05-04 20:07:37

+6

我敢肯定，不適用於所有瀏覽器（包括FF和IE，當我上次測試） - 我記得它唯一使用的瀏覽器是Chrome。 – 2011-05-04 22:47:15

+0

這隻適用於jQuery，但它不是一個獨立的解決方案。 – Solenoid 2011-09-24 22:51:04

+3

這個*出現*起作用（它會調出文件選擇器菜單），但是當表單被提交時，出於安全原因，文件不會在FireFox和IE中發送。 – ampersandre 2011-10-07 17:24:18

77

我有一個時間赫克試圖完成這一點。我不想使用Flash解決方案，並且我查看的所有jQuery庫在所有瀏覽器中都不可靠。

我想出了我自己的解決方案，它完全在CSS中實現（除了onclick樣式更改以使按鈕顯示爲「單擊」）。

您可以嘗試在這裏工作的例子：http://jsfiddle.net/VQJ9V/307/（經測試，在FF 7，IE 9，Safari 5的，歌劇11和Chrome 14）

它可以通過創建一個大的文件輸入（與字體大小：50px），然後將其封裝在具有固定大小和溢出的div中：隱藏。輸入只能通過這個「窗口」div來看到。在div可以給出一個背景圖像或顏色，文本可以被添加，和輸入可製成透明的，以揭示在div背景：

HTML：

<div class="inputWrapper"> 
    <input class="fileInput" type="file" name="file1"/> 
</div>

CSS：

.inputWrapper { 
    height: 32px; 
    width: 64px; 
    overflow: hidden; 
    position: relative; 
    cursor: pointer; 
    /*Using a background color, but you can use a background image to represent a button*/ 
    background-color: #DDF; 
} 
.fileInput { 
    cursor: pointer; 
    height: 100%; 
    position:absolute; 
    top: 0; 
    right: 0; 
    z-index: 99; 
    /*This makes the button huge. If you want a bigger button, increase the font size*/ 
    font-size:50px; 
    /*Opacity settings for all browsers*/ 
    opacity: 0; 
    -moz-opacity: 0; 
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0) 
}

讓我知道是否有任何問題，我會盡力解決它們。

來源

2011-10-07 18:23:21 ampersandre

+3

這是我碰到過的與所有瀏覽器配合使用的最佳解決方案 – Fatal 2012-08-24 05:06:30

+2

你是男人。我一直在FF這個問題上苦苦掙扎，你的解決方案是唯一真正有效的解決方案，特別是通過使用「字體大小」增加活動區域來增加按鈕。謝謝！ :) – jpincheira 2013-01-24 16:19:39

+2

優秀的一個沒有使用任何腳本 – Bujji 2013-06-05 21:45:48

25

隱藏輸入文件元素並創建一個可見按鈕，該按鈕將觸發該輸入文件的單擊事件。

試試這個：

CSS

#file { width:0; height:0; }

HTML：

<input type='file' id='file' name='file' /> 
<button id='btn-upload'>Upload</button>

JAVASCRIPT（jQuery的）：

$(function(){ 
    $('#btn-upload').click(function(e){ 
     e.preventDefault(); 
     $('#file').click();} 
    ); 
});

來源

2011-12-22 13:09:36 jojo

50

我浪費了我今天一天得到這個工作。我發現這裏沒有任何解決方案適用於我的每個場景。

然後我記得我看到一個沒有文本框的example for the JQuery File Upload。所以我所做的是我以他們爲榜樣，並將其分解到相關部分。

該解決方案至少適用於IE和FF，並且可以完全設計風格。在下面的例子中，文件輸入隱藏在「添加文件」按鈕的下方。

<html> 

<head> 
    <title>jQuery File Upload Example</title> 
    <style type="text/css"> 
     .myfileupload-buttonbar input 
     { 
      position: absolute; 
      top: 0; 
      right: 0; 
      margin: 0; 
      border: solid transparent; 
      border-width: 0 0 100px 200px; 
      opacity: 0.0; 
      filter: alpha(opacity=0); 
      -o-transform: translate(250px, -50px) scale(1); 
      -moz-transform: translate(-300px, 0) scale(4); 
      direction: ltr; 
      cursor: pointer; 
     } 
     .myui-button 
     { 
      position: relative; 
      cursor: pointer; 
      text-align: center; 
      overflow: visible; 
      background-color: red; 
      overflow: hidden; 
     } 
    </style> 
</head> 
<body> 
    <div id="fileupload" > 
     <div class="myfileupload-buttonbar "> 
      <label class="myui-button"> 
       <span >Add Files</span> 
       <input id="file" type="file" name="files[]" /> 
      </label> 
     </div> 
    </div> 
</body> 
</html>

來源

2012-02-06 17:02:06 tmanthey

1

<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo"> 

$("#logo").css('opacity','0'); 

$("#select_logo").click(function(){ 
    $().trigger('click'); 
    return false; 
});

來源

2012-09-15 10:09:58

1

對於我來說，最簡單的方法是使用字體顏色像背景顏色。簡單，不優雅，但有用。

<div style="color:#FFFFFF"> <!-- if background page is white, of course --> 
<input class="fileInput" type="file" name="file1"/></div>

來源

2012-12-30 15:41:37

105

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

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

來源

2013-02-11 06:07:53 shiba

1

所以這裏要做到這一點對於所有瀏覽器的最佳方式：

忘了CSS！

<p>Append Image:</p> 
<input type="button" id="clickImage" value="Add Image" /> 
<input type="file" name="images[]" id="images" multiple /> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script> 

<script> 
$('#images').hide();   
$('#clickImage').click(function() {  
    $('#images').trigger('click'); 
}); 
</script>

來源

2013-02-23 17:54:53 user1965301

1

所有這些問題的答案很可愛，但CSS是行不通的，因爲它不是在所有瀏覽器和設備一樣，我寫的第一個答案將在一切，但Safari瀏覽器工作。爲了得到它的工作翻過所有瀏覽器都必須動態地創建和重建要清除輸入文本每一次的所有時間：

var imageDiv = document.createElement("div"); 
    imageDiv.setAttribute("id", "imagediv"); 
    imageDiv.style.cssText = 'position:relative; vertical-align: bottom;'; 
    var imageText = document.createTextNode("Append Image:"); 
    var newLine = document.createElement("br"); 
    var image = document.createElement("input");  
    image.setAttribute("type", "file"); 
    image.setAttribute("id", "images"); 
    image.setAttribute("name", "images[]");  
    image.setAttribute("multiple", "multiple"); 
    imageDiv.appendChild(imageText); 
    imageDiv.appendChild(newLine); 
    imageDiv.appendChild(image); 
    questionParagraph.appendChild(imageDiv);

來源

2013-02-27 04:09:55 user1965301

3

我知道這是一個老的文章，但一個簡單的方法來使文本消除只是爲您的背景設置文本顏色。

例如，如果你輸入的文字背景爲白色，則：

input[type="file"]{ 
color:#fff; 
}

這不會影響該選擇哪些仍然是黑色，由於瀏覽器的文件文本。

來源

2013-03-05 03:22:04 Keleko

1

tmanthey的答案相當不錯，只是在Firefox v20中無法使用邊框寬度播放。如果你看到link（演示，實際上不能顯示），他們解決了這個問題，使用font-size = 23px，transform：translate（-300px，0px）scale（4）來獲得更大的按鈕。

如果您想使其成爲拖放輸入框，則在其他div上使用.click（）的其他解決方案將毫無用處。

來源

2013-05-03 11:17:06

7

我使用了上面推薦的一些代碼，在花了好幾個小時的時間之後，我終於找到了一個免費的css包解決方案。

您可以在這裏運行 - http://jsfiddle.net/WqGph/

但後來找到了一個更好的解決方案 - http://jsfiddle.net/XMMc4/5/

<input type = "button" value = "Choose image #2" 
    onclick ="javascript:document.getElementById('imagefile').click();"> 
     <input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>

來源

2013-05-10 03:32:17 GoreOle

4

你可以標記的圖像，所以當你點擊它的按鈕的單擊事件會觸發。你可以簡單地使正常的按鈕隱形：

<form> 
    <label for="fileButton"><img src="YourSource"></label> <!--You don't have to put an image here, it can be anything you like--> 
    <input type="file" id="fileButton" style="display:none;"/> 
</form>

它適用於所有瀏覽器，我很容易使用。

來源

2013-10-05 14:01:13

1

這裏有幾個有效的選項，但我想我會給我想出來，同時試圖解決類似的問題。 http://jsfiddle.net/5RyrG/1/

<span class="btn fileinput-button"> 
    <span>Import Field(s)</span> 
    <input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple> 
</span> 
<div id="txt"></div> 

function handleFiles(files){ 
    $('#txt').text(files[0].name); 
}

來源

2013-10-18 14:41:45

11

隱藏與CSS的輸入文件標籤，添加標籤並將其分配給輸入按鈕。標籤將是可點擊的，點擊後會啓動文件對話框。

<input type="file" name="imageUpload" id="imageUpload" class="hide"/> 
<label for="imageUpload" class="button-style">Select file</label>

將樣式添加到標籤作爲按鈕。
Live Demo

來源

2013-10-29 10:25:11

3

這個工作對我來說：

input[type="file"] { 
    color: white!important; 
}

來源

2014-02-23 13:42:34 newbie

2

我只是風格的輸入文件，寬度：85px，且文本字段消失在所有

來源

2014-04-20 15:38:57

5

這樣做的另一個簡單的方法。在html中製作一個「輸入類型文件」標籤並隱藏它。然後點擊一個按鈕並根據需要進行格式化。在此之後使用javascript/jquery以編程方式單擊按鈕時單擊輸入標記。

HTML： -

<input id="file" type="file" style="display: none;"> 
<button id="button">Add file</button>

的JavaScript： -

document.getElementById('button').addEventListener("click", function() { 
    document.getElementById('file').click(); 
});

的jQuery： -

$('#button').click(function(){ 
    $('#file').click(); 
});

CSS： -

#button 
{ 
    background-color: blue; 
    color: white; 
}

這是一個相同的工作JS小提琴： - http://jsfiddle.net/32na3/

來源

2014-07-14 09:28:01 divyenduz

4

您可以在一個隱藏的文件輸入調度click事件是這樣的：

<form action="#type your action here" method="POST" enctype="multipart/form-data"> 
 
    \t \t <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" >Click to upload!</div> 
 
    \t <!-- hide input[type=file]!--> 
 
    \t <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div> 
 
    \t <input type="submit" value='submit' > 
 
    </form> 
 

 
    <script type="text/javascript"> 
 
    \t var btn = document.getElementById("yourBtn"); 
 
    \t var upfile = document.getElementById("upfile"); 
 
    \t btn.addEventListener('click',function(){ 
 
    \t \t if(document.createEvent){ 
 
    \t \t \t var ev = document.createEvent('MouseEvents'); 
 
    \t \t \t ev.initEvent('click',true,false); 
 
    \t \t \t upfile.dispatchEvent(ev); 
 
    \t \t }else{ 
 
     \t \t upfile.click(); 
 
    \t \t } 
 
    \t }); 
 
    
 
    </script>

來源

2015-09-10 08:18:06

5

這裏是我的好醇」補救措施：

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

至少它在Safari中工作。

平原和簡單。

來源

2015-10-27 02:51:54

1

我寫了這個：

<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'> 
 

 
    <div style="width: 0; height: 0; overflow: hidden;"> 
 
     <input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" /> 
 
    </div> 
 
    
 
</form> 
 

 
<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />

做工精細在所有瀏覽器，沒有jQuery的，沒有CSS。

來源

2015-11-26 19:38:03 MadMaxIII

4

HTML：

<input type="file" name="upload" id="upload" style="display:none"></input> 
    <button id="browse">Upload</button>

JQUERY

$(document).ready(function(){ 
     $("#browse").click(function(){ 
     $("#upload").click(); 
     }); 
});

希望這個作品:)

來源

2016-03-28 16:33:14

1

這裏是@ ampersandre流行的解決方案的簡化版本，在所有主要的瀏覽器上運行。 Asp.NET標記

<asp:TextBox runat="server" ID="FilePath" CssClass="form-control" 
    style="float:left; display:inline; margin-right:5px; width:300px" 
    ReadOnly="True" ClientIDMode="Static" /> 
<div class="inputWrapper"> 
    <div id="UploadFile" style="height:38px; font-size:16px; 
     text-align:center">Upload File</div> 
    <div> 
     <input name="FileUpload" id="FileInput" runat="server" 
      type="File" /> 
    </div> 
    </div> 
    <asp:Button ID="UploadButton" runat="server" 
    style="display:none" OnClick="UploadButton_Click" /> 
</div> 
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />

jQuery代碼

$(document).ready(function() { 

    $('#UploadFile').click(function() { 
     alert('UploadFile clicked'); 
     $('[id$="FileInput"]').trigger('click'); 
    }); 

    $('[id$="FileInput"]').change(function (event) { 
     var target = event.target; 
     var tmpFile = target.files[0].name; 
     alert('FileInput changed:' + tmpFile); 
     if (tmpFile.length > 0) { 
      $('#hdnFileName').val(tmpFile); 
     } 
     $('[id$="UploadButton"]').trigger('click'); 
    }); 
});

CSS代碼

.inputWrapper { 
height: 38px; 
width: 102px; 
overflow: hidden; 
position: relative; 
padding: 6px 6px; 
cursor: pointer; 
white-space:nowrap; 
/*Using a background color, but you can use a background image to represent 
a button*/ 
background-color: #DEDEDE; 
border: 1px solid gray; 
border-radius: 4px; 
-moz-user-select: none; 
-ms-user-select: none; 
-webkit-user-select: none; 
user-select: none; 
}

採用了隱藏式「UploadButton」點擊觸發與標準服務器回傳。當「上傳文件」文本溢出時，使用「上傳文件」文本將輸入控件從包裝div中的視圖中移出視圖，因此不需要爲「文件輸入」控件div應用任何樣式。 $（[id $ =「FileInput」]）選擇器允許應用標準ASP.NET前綴的ID部分。上傳從hdnFileName.Value後面的服務器代碼中設置的FilePath文本框的值。

來源

2016-06-20 22:39:10

3

我試圖實施前兩個解決方案，並最終導致我浪費大量時間。最後，應用這個。css類解決了這個問題...

input[type='file'] { 
    color: transparent; 
}

完成！超潔淨，超簡單...

來源

2016-12-16 15:59:45 nikotromus

-1

此HTML代碼顯示只有上傳文件按鈕

<form action="/action_page.php"> 
    <input type="button" id="id" value="Upload File" onclick="document.getElementById('file').click();" /> 
    <input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/> 
</form>

來源

2017-09-01 09:08:46

輸入類型=文件只顯示按鈕

回答

相關問題