标签file uploadbutton
如何国际化文件select器的button文本？ 例如，这个代码给用户的是什么：
<input type="file" .../> 它通常由浏览器提供，难以改变，所以唯一的解决办法是CSS / JavaScript hack，
有关某些方法，请参阅以下链接：
你得到你的浏览器的语言为您的button。 没有办法以编程方式更改它。
退后一步！ 首先，你假设用户在他们的设备上使用了一个国外的语言环境，这不是一个合理的假设来接pipe文件select器的button文本，并说明你想要的东西。
您希望控制页面上可见的每一种语言是合理的。 file upload控件的内容不是HTML的一部分。 这个控件背后有更多的内容，例如在WebKit中，它还会在button旁边显示“没有select文件”。
有一些非常冒险的解决方法可以尝试（例如@ ChristopheD的答案中提到的那些），但是没有一个真正成功：
- 对于屏幕阅读器，文件控件仍然会说“浏览…”或“select文件”，并且自定义file upload不会被公布为file upload控件，而只是一个button或文本input。
- 他们中的许多人不能显示所选文件，或者显示用户不再select文件
- 他们中的许多人看起来不像本地控制，所以在非标准设备上看起来可能会很奇怪。
- 键盘支持通常很差。
- 作者创build的用户界面组件永远不可能像其本地对等function一样完全正常运行（并且越接近于假设Windows 7上的IE10越偏离其他浏览器和操作系统组合）。
- 现代浏览器支持拖放到本机file upload控制。
- 一些技术可能触发安全软件的启发式攻击，作为诱骗用户上传文件的一种潜在的“点击式”尝试。
偏离原生控件总是一件有风险的事情，有许多用户可以使用的不同设备，无论您select哪种解决方法，您都不会在每一台设备上进行testing。
然而，从用户体验的angular度来看，所有尝试都失败的原因还有更大的原因：在这个控件背后还有更多的非本地化内容，即文件select对话框本身。 一旦用户需要遍历他们的文件系统，或者不select要上传的文件，他们将受到主机操作系统区域设置的限制。
你确定通过偏离本机控制来做你的用户的任何正义，只是为了本地化的文本，当他们点击它，他们只是要获得操作系统语言环境吗？
您可以为您的用户做的最好的事情是确保您有足够的文件input控制本地化的指导。 （如表单字段标签，提示文本，工具提示文本）。
抱歉。 🙁
–
这个答案是为那些寻找任何理由不本地化file upload控制。
纯CSS解决scheme：
.inputfile { /* visibility: hidden etc. wont work */ width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .inputfile:focus + label { /* keyboard navigation */ outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; } .inputfile + label * { pointer-events: none; }
<input type="file" name="file" id="file" class="inputfile" /> <label for="file">Choose a file (Click me)</label>
我可以用下面的代码实现一个使用jQueryMobile的button：
<label for="ppt" data-role="button" data-inline="true" data-mini="true" data-corners="false">Upload</label> <input id="ppt" type="file" name="ppt" multiple data-role="button" data-inline="true" data-mini="true" data-corners="false" style="opacity: 0;"/>
以上代码创build一个“上传”button（自定义文本）。 点击上传button，文件浏览启动。 使用Chrome 25和IE9进行testing。
要制作自定义“浏览button”解决scheme，只需尝试制作隐藏的浏览button，自定义button或元素以及一些Jquery。 这样我就不会修改依赖于每个浏览器/版本的实际“浏览button”。 这是一个例子。
HTML：
<div id="import" type="file">My Custom Button</div> <input id="browser" class="hideMe" type="file"></input>
CSS：
#import { margin: 0em 0em 0em .2em; content: 'Import Settings'; display: inline-block; border: 1px solid; border-color: #ddd #bbb #999; border-radius: 3px; padding: 5px 8px; outline: none; white-space: nowrap; -webkit-user-select: none; cursor: pointer; font-weight: 700; font: bold 12px/1.2 Arial,sans-serif !important; /* fallback */ background-color: #f9f9f9; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C2C1C1), to(#2F2727)); } .hideMe{ display: none; }
JS：
$("#import").click(function() { $("#browser").trigger("click"); $('#browser').change(function() { alert($("#browser").val()); }); });
更容易使用它
<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" /> <input type="file" style="display:none;" id="file" name="file"/>
