【发布时间】：2010-11-12 21:58:30
【问题描述】：
如何将浏览按钮重命名为“选择文件”？例如：
<input type=file name=browse >
【问题讨论】：
标签： html
【发布时间】：2010-11-12 21:58:30
【问题描述】：
<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();"/>
【讨论】：
-
我使用了这种方法并且对它感觉很舒服。但是有一个主要的改变：如果你应用 display: none 到那个输入，点击不起作用，所以最好使用 opacity: 0;。谢谢！！！
-
旧版浏览器不支持 opcaity，所以要小心。
-
我现在想知道如果我想发送另一个变量会发生什么，我们称之为
group_id。我应该怎么寄？在 HTML<input type="hidden" class="hide" id="group_id" name="group_id" value="2" />中但在脚本中？ -
我会说输入文本也应该禁用="true"，如果不是，当用户点击它时会看到一个指针。
该按钮不称为“浏览按钮”——这只是您的浏览器为其命名的名称。浏览器可以随意实现文件上传控制。例如，在 Safari 中，它被称为“选择文件”，它位于您可能正在使用的任何内容的对面。
您可以使用the technique outlined on QuirksMode 为上传控件实现自定义外观，但这不仅仅是更改按钮的文本。
【讨论】：
- 用
<label>标签包裹<input type="file">； - 在标签内添加标签（包含您需要的文本），例如
<span>或<a>； - 让这个标签看起来像一个按钮；
- 通过
display: none使input[type="file"]不可见。
【讨论】：
-
这适用于chrome，但我没有在其他浏览器中测试过。
-
我对其进行了更多测试：它适用于 chrome foxfire、IE 和桌面边缘。它也适用于我的 iPad 的 safari 和 chrome，它适用于我的 android 手机 Firefox。
一点 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就不起作用。一个写得体面的解决方案会优雅地降级，并且不会退回到有一个按钮什么都不做的位置。
您可以使用简单的 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' );
} );
【讨论】：
-
这里确保按钮是
type="button"，否则它将提交表单。
这是使用纯 HTML 和 javascript “重命名”具有文件类型且不使用 JQuery 的输入文本的最佳、简单、简短和干净的方法：
<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
*The text you want*
</button>
【讨论】：
【讨论】：
不，您不能更改文件上传输入的文本。但是有一些技巧可以在按钮上叠加图像。
【讨论】：
您也可以使用 Uploadify，这是一个很棒的 jQuery 上传插件，它可以让您上传多个文件，并且还可以轻松地设置文件字段的样式。 http://www.uploadify.com
【讨论】：