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

Question

如何将浏览按钮重命名为“选择文件”？例如。：

<input type=file name=browse >

Answer 1

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

您可以使用the technique outlined on QuirksMode实现上传控件的自定义外观，但这不仅仅是更改按钮的文本。

Answer 2

您还可以使用Uploadify，这是一个很棒的jQuery上传插件，它可以让您上传多个文件，还可以轻松设置文件字段的样式。 http://www.uploadify.com

Answer 3

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

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

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

Answer 6

您可以使用简单的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 7

输入类型=“文件”字段非常棘手，因为它在每个浏览器上的行为都不同，无法设置样式，或者可以设置一些样式，具体取决于浏览器;并且很难调整大小（取决于浏览器，它可能具有无法覆盖的最小尺寸）。

但是有一些解决方法。最好的一个是在我看来this one（结果是here）。

Answer 8

AFAIK你不能改变按钮文本，它在浏览器中是硬编码的。

但是有几种解决方法可以在表单上放置一个带有不同文本/图像的按钮：

link

Answer 9

这是使用纯HTML和javascript来“重命名”具有文件类型且没有JQuery的输入文本的最佳，简单，简洁和简洁的方法：

<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
    *The text you want*
</button>

Answer 10

不，您无法更改文件上传输入的文本。但是有一些技巧可以覆盖按钮上的图像。