Question

如何将文件选择器的按钮文本国际化？例如，此代码向用户显示的内容：

 <input type="file" .../>

Answer 1

它通常由浏览器提供并且难以更改，因此唯一的解决方法是CSS / JavaScript hack，

有关一些方法，请参阅以下链接：

Answer 2

退后一步！首先，您假设用户在他们的设备上使用外部区域设置，这不是合理地接管文件选择器的按钮文本并使其说明您 想要它。

您希望控制页面上可见的每种语言都是合理的。但是，文件上载控件的内容不是HTML的一部分。此控件背后有更多内容，例如，在WebKit中，它还在按钮旁边显示“未选择文件”。

有很多hacky解决方法试图这样做（例如@ ChristopheD的回答中提到的那些），但它们都没有真正成功：

对于屏幕阅读器，文件控件仍然会显示“浏览...”或“选择文件”，并且自定义文件上传不会被宣布为文件上传控件，而只是一个按钮或文本输入。

其中许多人无法显示所选文件，或者显示用户已不再选择文件

它们中的许多看起来都不像原生控件，所以在非标准设备上可能看起来很奇怪。

键盘支持通常很差。

作者创建的UI组件永远不会像其本机等效组件那样功能齐全（并且越接近它，假设Windows 7上的IE10，它将越偏离其他浏览器和操作系统组合）。 / LI>
现代浏览器支持drag＆amp;放入原生文件上传控件。

某些技术可能会触发安全软件中的启发式操作，因为这可能会诱使用户上传文件。

偏离原生控件始终是一件危险的事情，您的用户可能会使用大量不同的设备，无论您选择哪种解决方法，您都不会在每个设备中对其进行测试。

但是，从用户体验的角度来看，所有尝试都失败的原因还有一个更大的原因：此控件背后还有更多非本地化的内容，即文件选择对话框本身。一旦用户浏览了他们的文件系统或者没有选择要上传的文件，他们就会受到主机操作系统区域设置的限制。

您是否确定通过偏离原生控件为您的用户伸张正义，只是为了本地化文本，当他们点击它时，他们只是要获得操作系统区域设置？

您可以为用户做的最好的事情是确保您对文件输入控件有足够的本地化指导。（例如表单字段标签，提示文本，工具提示文本）。

对不起。： - （

-

这个答案适用于寻找任何理由不来本地化文件上传控件的人。

Answer 3

您可以获得浏览器的按键语言。没有办法以编程方式更改它。

Answer 4

纯CSS解决方案：

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

来源：http://tympanus.net/codrops

Answer 5

我可以使用jQueryMobile实现一个按钮，代码如下：

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

上面的代码创建了一个“上传”按钮（自定义文本）。点击上传按钮，启动文件浏览。经过Chrome 25＆amp; S测试IE9。

Answer 6

要制作自定义“浏览按钮”解决方案，只需尝试制作隐藏的浏览按钮，自定义按钮或元素以及一些Jquery。这样我就不会修改实际的“浏览按钮”，这取决于每个浏览器/版本。这是一个example.

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());
    });
});

Answer 7

更容易使用

<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>

标记文件上传按钮

7 个答案: