所有瀏覽器的文件輸入按鈕，這可能嗎？

是否可以使用uploadify允許任何用戶從文件對話框中選擇一個文件並將其插入到表單的文件輸入元素中？我只需要使用uploadify作爲將「上傳按鈕」設置爲圖片的方式。所有瀏覽器的文件輸入按鈕，這可能嗎？

我試過其他方法here,here和here。所有瀏覽器都不兼容。

還有什麼我可以用/做我的文件輸入元素作爲圖像？

我想讓我的文件輸入按鈕在所有瀏覽器中看起來一致。

來源

2011-03-04 Christian Fazzini

我不記得技術的來源，但this似乎是跨瀏覽器。經測試，在：

谷歌瀏覽器9
火狐3.6
的Internet Explorer 6-9
歌劇院10
Safari瀏覽器的Windows

下面是完整的代碼：

HTML：

<div> 
    <button><!-- this is skinnable -->Pick a file ...</button> 
    <input type="file" /> 
</div>

CSS：

div 
{ 
    position:relative; 
    width: 100px; 
    height: 30px; 
    overflow:hidden; 
} 

div button 
{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 

div input 
{ 
    font: 500px monospace; /* make the input's button HUGE */ 
    opacity:0; /* this will make it transparent */ 
    filter: alpha(opacity=0); /* transparency for Internet Explorer */ 
    position: absolute; /* making it absolute with z-index:1 will place it on top of the button */ 
    z-index: 1; 
    top:0; 
    right:0; 
    padding:0; 
    margin: 0; 
}

這樣做是爲了使<input type="file" />透明，並將其放置的一些風格，能夠含量（在這種情況下<button>）頂部。當最終用戶點擊按鈕時，她將實際點擊<input type="file" />。

來源

2011-03-04 09:33:52

嗯，非常乾淨的解決方案。似乎在上述瀏覽器中起作用。將進一步測試，但迄今看起來不錯。感謝那個Atanas。欣賞它 – 2011-03-04 09:53:32

之前使用過它，它工作得很好。您還可以在輸入[文件]上使用onchange事件來讀取文件路徑並在用戶界面中將其顯示回給用戶。我用這個壓縮器提到[這裏]（http://stackoverflow.com/questions/23745/does-a-yui-compressor-gui-app-exist/5056975#5056975） – johnhunter 2011-03-04 10:15:12

作爲參考，我發現了一些與上述解決方案相關的在線資源：http：//www.quirksmode.org/dom/inputfile.html和http://hiox.org/30547-css-style-input-typefile-tags.php想要進一步閱讀 – 2011-03-04 10:41:47

在這種情況下，您最好的選擇是使用Flash上傳器。這將引入一個完整的單獨控制，並且不會依賴瀏覽器。網上有很多。這裏有一個：http://swfupload.org/

來源

2011-03-04 08:38:35 JohnP

JohnP，我所列舉的那些類似的SWFUpload在我最初的職位數。問題仍然是一樣的，正如使用uploadify方法所解釋的那樣。 – 2011-03-04 08:50:29

我發佈的鏈接實際上使用Flash，並且只有JS作爲後備。 Flash在所有瀏覽器上看起來都一致。看看 – JohnP 2011-03-04 08:56:22

雖然我不想通過Ajax提交表單。你是對的，因爲Flash會使文件輸入看起來一致。但Flash通過Ajax以自己的方式提交 – 2011-03-04 09:03:12

如果它只是你想要的樣式的上傳按鈕，爲什麼你不能使用CSS？這應該適用於所有瀏覽器。

如果你把你的代碼放在jsFiddle上，我可以告訴你更多關於你能做什麼。

來源

2011-03-04 08:39:54 picardo

嗨Picardo理論上，我想使用一個圖像，而不是所有瀏覽器中顯示的本機文件輸入元素。我相信CSS本身無法刪除文件輸入元素附帶的文本框 – 2011-03-04 08:52:38

您遇到哪些瀏覽器問題？您可以使用您引用的其中一個選項，併爲非支持的瀏覽器找到解決辦法。 – picardo 2011-03-04 08:57:56

未在IE上測試過。但http://www.appelsiini.net/projects/filestyle適用於FF，Chrome，Safari。在Opera中完全不起作用 – 2011-03-04 09:01:10

使用「標籤」標籤和「for」屬性的簡單方法。像這樣http://jsfiddle.net/Txrs6/但在這種情況下，我們沒有看到選定的文件。 CODE

<label for="inputFile" class="col-sm-3" style="padding-left: 0px;"><a class="btn btn-info">Выбрать...</a></label>` 

<input style="display: none;" type="file" id="inputFile">

另一種方式與JS http://jsfiddle.net/PZ5Ep/

來源

2013-11-01 14:23:49 kraken

所有瀏覽器的文件輸入按鈕，這可能嗎？

回答

相關問題