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

Posted 2023-03-15

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

【英文标题】：How to rename HTML "browse" button of an input type=file?

【发布时间】：2010-11-12 21:58:30

【问题描述】：

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

<input type=file name=browse >

【问题讨论】：

How to change the button text of <input type="file" />?的可能重复

【参考方案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/

【讨论】：

我使用了这种方法并且对它感觉很舒服。但是有一个主要的改变：如果你应用 display: none 到那个输入，点击不起作用，所以最好使用 opacity: 0;。谢谢！！！

旧版浏览器不支持 opcaity，所以要小心。

我现在想知道如果我想发送另一个变量会发生什么，我们称之为group_id。我应该怎么寄？在 html <input type="hidden" class="hide" id="group_id" name="group_id" value="2" /> 中但在脚本中？

我会说输入文本也应该禁用="true"，如果不是，当用户点击它时会看到一个指针。

【参考方案2】：

该按钮不称为“浏览按钮”——这只是您的浏览器为其命名的名称。浏览器可以随意实现文件上传控制。例如，在 Safari 中，它被称为“选择文件”，它位于您可能正在使用的任何内容的对面。

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

【参考方案3】：

用<label> 标签包裹<input type="file">； 在标签内添加标签（包含您需要的文本），例如<span> 或<a>； 让这个标签看起来像一个按钮； 通过display: none 使input[type="file"] 不可见。

【讨论】：

这适用于chrome，但我没有在其他浏览器中测试过。

我对它进行了更多测试：它适用于 chrome foxfire、IE 和桌面边缘。它也适用于我的 iPad 的 safari 和 chrome，它适用于我的 android 手机 Firefox。

【参考方案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();"/>

不是最好看的解决方案，但它确实有效。

【讨论】：

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

@David Dorwad：感谢您指出显而易见的问题（当 JS 不可用时，JS 不起作用）。现实世界中发生这种情况的情况极为罕见。此外，我并不打算让任何人盲目地复制和粘贴它并立即使用它，它的目的是作为一个指针来展示实现手头目标的一种可能方式。但是，嘿，谢谢你阻止我再次发帖。

关键是如果JS不可用，HTML就不起作用。一个写得体面的解决方案会优雅地降级，并且不会退回到有一个按钮什么都不做的位置。

【参考方案5】：

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

【讨论】：

这里确保按钮是type="button"，否则它将提交表单。

【参考方案6】：

输入 type="file" 字段非常棘手，因为它在每个浏览器上的行为都不同，不能设置样式，或者可以设置一点样式，这又取决于浏览器；并且很难调整大小（再次取决于浏览器，它可能具有无法覆盖的最小大小）。

虽然有一些解决方法。我认为最好的是this one（结果是here）。

【参考方案7】：

这是使用纯 HTML 和 javascript “重命名”具有文件类型且不使用 JQuery 的输入文本的最佳、简单、简短和干净的方法：

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

【参考方案8】：

AFAIK 您无法更改按钮文本，它在浏览器中是硬编码的。

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

link

【参考方案9】：

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

【参考方案10】：

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