如何重命名输入类型=文件的 HTML“浏览”按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1163667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to rename HTML "browse" button of an input type=file?
提问by coderex
How to rename the browse button as "Select the file"? E.g.:
如何将浏览按钮重命名为“选择文件”？例如：
<input type=file name=browse >
采纳答案by Chuck
The button isn't called the "browse button" — that's just the name your browser gives for it. Browsers are free to implement the file upload control however they like. In Safari, for example, it's called "Choose File" and it's on the opposite side of whatever you're probably using.
该按钮不称为“浏览按钮”——这只是您的浏览器为其提供的名称。浏览器可以随意实现文件上传控制。例如，在 Safari 中，它被称为“选择文件”，它与您可能正在使用的任何文件相反。
You can implement a custom look for the upload control using the technique outlined on QuirksMode, but that goes beyond just changing the button's text.
您可以使用QuirksMode 中概述的技术实现上传控件的自定义外观，但这不仅仅是更改按钮的文本。
回答by Payam Shoeibi
<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();"/>
回答by Pavel
- Wrap the
<input type="file">with a<label>tag; - Add a tag (with the text that you need) inside the label, like a
<span>or<a>; - Make this tag look like a button;
- Make
input[type="file"]invisible viadisplay: none.
<input type="file">用<label>标签包裹；- 在标签内添加一个标签（带有您需要的文本），例如 a
<span>或<a>; - 使这个标签看起来像一个按钮；
input[type="file"]通过使不可见display: none。
回答by korona
A bit of JavaScript will take care of it:
一些 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();"/>
Not the nicest looking solution, but it works.
不是最好看的解决方案，但它有效。
回答by Thielicious
You can do it with a simple css/jq workaround: Create a fake button which triggers the browse button that is hidden.
您可以使用简单的 css/jq 解决方法来实现：创建一个假按钮来触发隐藏的浏览按钮。
HTML
HTML
<input type="file"/>
<button>Open</button>
CSS
CSS
input { display: none }
jQuery
jQuery
$( 'button' ).click( function(e) {
e.preventDefault(); // prevents submitting
$( 'input' ).trigger( 'click' );
} );
回答by FWH
The input type="file" field is very tricky because it behaves differently on every browser, it can't be styled, or can be styled a little, depending on the browser again; and it is difficult to resize (depending on the browser again, it may have a minimal size that can't be overwritten).
input type="file" 字段非常棘手，因为它在每个浏览器上的行为都不同，无法设置样式，或者可以设置一点样式，这又取决于浏览器；并且很难调整大小（再次取决于浏览器，它可能具有无法覆盖的最小大小）。
There are workarounds though. The best one is in my opinion this one(the result is here).
回答by PeterMmm
回答by IntelarX
Here is the best, simple, short and clean way to "rename" the text of an input with file type and without JQuery, with pure HTML and javascript:
这是使用纯 HTML 和 javascript 重命名具有文件类型且不使用 JQuery 的输入文本的最佳、简单、简短和干净的方法：
<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
*The text you want*
</button>
回答by Canavar
No, you can't change file upload input's text. But there are some tricks to overlay an image over the button.
不，您不能更改文件上传输入的文本。但是有一些技巧可以在按钮上覆盖图像。
回答by dande
You can also use Uploadify, which is a great jQuery upload plugin, it let's you upload multiple files, and also style the file fields easily. http://www.uploadify.com
您还可以使用 Uploadify，这是一个很棒的 jQuery 上传插件，它可以让您上传多个文件，还可以轻松地设置文件字段的样式。 http://www.uploadify.com
