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

Posted

技术标签:

【中文标题】如何重命名输入类型 = 文件的 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 &lt;input type="hidden" class="hide" id="group_id" name="group_id" value="2" /&gt; 中但在脚本中? 我会说输入文本也应该禁用="true",如果不是,当用户点击它时会看到一个指针。【参考方案2】:

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

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

【讨论】:

【参考方案3】:
    &lt;label&gt; 标签包裹&lt;input type="file"&gt;; 在标签内添加标签(包含您需要的文本),例如&lt;span&gt;&lt;a&gt;; 让这个标签看起来像一个按钮; 通过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

【讨论】:

以上是关于如何重命名输入类型 = 文件的 HTML“浏览”按钮?的主要内容,如果未能解决你的问题,请参考以下文章

DOS按规则批量重命名所有(子)目录下文件

c ++文件系统,按字母顺序获取目录中的文件,重命名输入

linux 下对文件重命名

文件如何批量添加后缀名?

文件夹重命名出现非法字符文件

怎么给手机照片重命名