如何重命名输入类型=文件的HTML"浏览"按钮？

Question

如何将浏览按钮重命名为" 选择文件 "？例如:

<input type=file name=browse >

Answer 1

<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 2

该按钮不称为"浏览按钮" - 这只是您的浏览器为其提供的名称.浏览器可以自由地实现文件上传控制,但是他们喜欢.例如,在Safari中,它被称为"选择文件",它与你可能使用的任何东西相反.

您可以使用QuirksMode上概述的技术实现上传控件的自定义外观,但这不仅仅是更改按钮的文本.

Answer 3

一点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 4

1. <input type="file">用<label>标签包裹;
2. 在标签内添加标签(带有您需要的文字),如a <span>或<a>;
3. 使这个标签看起来像一个按钮;
4. 请input[type="file"]通过无形display: none.