如何重命名輸入類型=文件的HTML「瀏覽」按鈕？

Question

如何將瀏覽按鈕重命名爲「選擇文件」？例如： -

<input type=file name=browse > 

Answer 1

按鈕不叫「瀏覽按鈕」 - 這只是你的瀏覽器提供的名字爲了它。不管他們喜歡，瀏覽器都可以自由地實現文件上傳控制。例如，在Safari中，它被稱爲「選擇文件」，它與您可能使用的任何對象相反。

您可以使用the technique outlined on QuirksMode實現上傳控件的自定義外觀，但這不僅僅是更改按鈕的文本。

Answer 2

輸入類型=「文件」字段是非常棘手的，因爲它表現不同上每一個瀏覽器，不能病急亂投醫，或可樣式一點，這取決於再次瀏覽器;並且很難重新調整大小（取決於瀏覽器，它可能會有一個最小的大小不能被覆蓋）。

雖然有解決方法。最好的是在我看來this one（結果是here）。

Answer 3

不，您不能更改文件上傳輸入的文本。但是在按鈕上覆蓋圖片還有一些技巧。

Answer 4

AFAIK您無法更改按鈕文本，它在瀏覽器中被硬編碼。

但也有一些變通方法把一個按鈕，diferent文字/圖像的形式：

link

Answer 5

你也可以使用uploadify，這是一個很棒的jQuery上傳插件，它可以讓你上傳多個文件，也可以很容易地設置文件的樣式。 http://www.uploadify.com

Answer 6

JavaScript的一個位將照顧它：

<script language="JavaScript" type="text/javascript"> 
function HandleBrowseClick() 
{ 
    var fileinput = document.getElementById("browse"); 
    fileinput.click(); 
    var textinput = document.getElementById("filename"); 
    textinput.value = fileinput.value; 
} 
</script> 

<input type="file" id="browse" name="fileupload" style="display: none"/> 
<input type="text" id="filename" readonly="true"/> 
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/> 

不是最好看的解決方案，但它的工作原理。

Answer 7

<script language="JavaScript" type="text/javascript"> 
function HandleBrowseClick() 
{ 
    var fileinput = document.getElementById("browse"); 
    fileinput.click(); 
} 
function Handlechange() 
{ 
var fileinput = document.getElementById("browse"); 
var textinput = document.getElementById("filename"); 
textinput.value = fileinput.value; 
} 
</script> 

<input type="file" id="browse" name="fileupload" style="display: none" onChange="Handlechange();"/> 
<input type="text" id="filename" readonly="true"/> 
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/> 

http://jsfiddle.net/J8ekg/

Answer 8

你可以用一個簡單的CSS/JQ解決方法做到這一點： 創建一個假的按鈕觸發的瀏覽按鈕被隱藏。

HTML

<input type="file"/> 
<button>Open</button> 

CSS

input { display: none } 

jQuery的

$('button').click(function(e) { 
    e.preventDefault(); // prevents submitting 
    $('input').trigger('click'); 
}); 

demo

Answer 9

1. 總結帶有<label>標籤的<input type="file">;
2. 在標籤內部添加一個標籤（包含您需要的文本），如<span>或<a>;
3. 使此標記看起來像一個按鈕;
4. 通過display: none使input[type="file"]隱形。