如何重命名inputtypes=文件的HTML“浏览”button？

如何将浏览button重命名为“ select文件 ”？ 例如：

<input type=file name=browse > 

Answer 1

该button不称为“浏览button” – 这只是浏览器给它的名字。 浏览器可以自由地实现file upload控制，不过他们喜欢。 例如，在Safari中，它被称为“select文件”，它与您可能使用的任何东西都相反。

您可以使用QuirksMode中概述的技术实现上传控件的自定义外观，但不仅仅是更改button的文本。

Answer 2

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

Answer 3

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

不是最好看的解决scheme，但它的作品。

Answer 4

1. 用<label>标签包装<input type="file"> ;
2. 在标签内添加一个标签（包含您需要的文本），如<span>或<a> ;
3. 使这个标签看起来像一个button;
4. 通过display: none使input[type="file"]不可见。

Answer 5

你可以用一个简单的css / jq解决方法来做到这一点：创build一个假button，触发隐藏的浏览button。

HTML

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

CSS

 input { display: none } 

jQuery的

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

演示

Answer 6

inputtypes=“文件”字段是非常棘手的，因为它在每个浏览器上的行为不同，它不能被设置样式，或者可以被devise一点，这取决于浏览器。 并且很难resize（取决于浏览器，它可能有一个最小的大小，不能被覆盖）。

虽然有解决方法。 在我看来最好的一个（结果在这里 ）。

Answer 7

AFAIK你不能改变button文本，它是在浏览器中硬编码。

但是有几种解决方法可以在窗体上放置不同文本/图像的button：

链接

Answer 8

不，您不能更改file uploadinput的文本。 但是有一些技巧将图片叠加在button上。

Answer 9

你也可以使用uploadify，这是一个很棒的jQuery上传插件，它可以让你上传多个文件，也可以很容易地设置文件的样式。 http://www.uploadify.com