如何重命名input type=file的HTML“浏览”按钮？

Question

如何重命名input type=file的HTML“浏览”按钮？

46

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

<input type=file name=browse >

- coderex

1

可能是重复的问题：如何更改<input type="file"/>按钮的文本？ - Alex

10个回答

25

并不是它真正的名称，这只是您的浏览器给它起的名字。浏览器可以自由实现文件上传控件。例如，在Safari中，它被称为“选择文件”，并且位于您可能正在使用的相反位置。

您可以使用在QuirksMode上概述的技术来自定义上传控件的外观，但那超出了仅更改按钮文本的范畴。

- Chuck

11

将 <input type="file"> 用 <label> 标签包裹；
在标签中添加一个带有所需文本的标签，比如 <span> 或 <a>；
让此标签看起来像一个按钮；
通过 display: none 使 input[type="file"] 不可见。

- Pavel

这在Chrome中可以工作，但我没有在其他浏览器中测试过。 - EKanadily

1

我进行了更多的测试：它在桌面版的Chrome、Firefox、IE和Edge中都可以运行。它还可以在我的iPad的Safari和Chrome中运行，在我的安卓手机Firefox中也可以运行。 - EKanadily

7

一点 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();"/>

虽然不是最美观的解决方案，但它确实有效。

- korona

如果没有可用的JS，这将是完全无法使用的（HTML也无效）。 - Quentin

@David Dorwad：感谢您指出显而易见的事实（当JS不可用时，JS无法工作）。虽然这种情况在现实世界中发生的可能性极小。此外，我并没有打算让任何人盲目地复制粘贴并立即使用它，它旨在作为一个指针，展示实现目标的一种可能方式。但是，感谢您阻止我再次发布。 - korona

重点是如果JS不可用，HTML将无法正常工作。一个写得好的解决方案应该能够优雅地降级，而不是退回到一个什么都不做的按钮位置。 - Quentin

3

以下是最佳、简单、短小精悍、没有使用JQuery的纯HTML和JavaScript“重命名”带有文件类型的文本输入框的方法：

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

- IntelarX

3

你可以使用简单的CSS/jQuery解决方法来完成这个操作：创建一个假按钮，触发隐藏的浏览按钮。

HTML

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

CSS（层叠样式表）

input { display: none }

jQuery

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

demo

- Thielicious

1

请确保按钮的 type="button"，否则它会提交表单。 - Mihai

2

类型为"file"的字段非常棘手，因为它在每个浏览器上的行为都不同，它不能被样式化，或者可以在某些浏览器上进行少量的样式化；并且它很难调整大小（再次取决于浏览器，它可能具有无法覆盖的最小大小）。

不过有一些解决方法可用。我认为最好的方法是这个（结果在这里）。

- FWH

1

据我所知，您无法更改按钮文本，因为它是在浏览器中硬编码的。

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

link

- PeterMmm

0

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

- Canavar

0

你也可以使用Uploadify，这是一个很棒的jQuery上传插件，它允许你上传多个文件，并且轻松地为文件字段设置样式。 http://www.uploadify.com

- dande

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Payam Shoeibi · Accepted Answer

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