52

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

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

7 回答 7

35

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

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

于 2009-03-26T18:27:40.267 回答
19

纯 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

于 2016-03-03T09:02:32.357 回答
17

退后一步！首先，您假设用户在他们的设备上使用外国语言环境，这不是一个合理的假设来证明接管文件选择器的按钮文本并使其说出您想要的内容。

您希望控制页面上可见的每一项语言是合理的。文件上传控件的内容不是 HTML 的一部分。这个控件后面还有更多的内容，比如在WebKit中，按钮旁边也写着“No file selected”。

有很多 hacky 变通办法可以尝试这样做（例如，@ChristopheD 的回答中提到的那些），但它们都没有真正成功：

  • 对于屏幕阅读器，文件控件仍会说“浏览...”或“选择文件”，并且自定义文件上传不会被宣布为文件上传控件，而只是一个按钮或文本输入。
  • 他们中的许多人无法显示选择的文件，或者显示用户不再选择文件
  • 它们中的许多看起来与本机控件完全不同，因此在非标准设备上可能看起来很奇怪。
  • 键盘支持通常很差。
  • 一个作者创建的 UI 组件永远不会像它的原生等效组件那样功能齐全（你越接近它在 Windows 7 上假设 IE10 的行为，它就越会偏离其他浏览器和操作系统组合）。
  • 现代浏览器支持拖放到本机文件上传控件。
  • 某些技术可能会触发安全软件中的启发式算法，作为潜在的“点击劫持”尝试诱骗用户上传文件。

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

然而，从用户体验的角度来看，所有尝试都失败的一个更大的原因是：在这个控件后面还有更多的非本地化内容，即文件选择对话框本身。一旦用户受制于遍历他们的文件系统或不选择要上传的文件，他们将受制于主机操作系统区域设置。

您确定您通过偏离本机控制来为您的用户提供任何正义，只是为了本地化文本，当他们单击它时，他们无论如何都会获得操作系统区域设置？

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

对不起。:-(

--

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

于 2015-07-27T09:56:58.280 回答
13

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

于 2009-03-26T18:05:45.763 回答
12

更容易使用它 

<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
于 2017-10-29T11:05:15.207 回答
3

我可以使用带有以下代码的 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 和 IE9 测试。

于 2013-03-05T04:36:28.213 回答
1

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

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());
    });
});
于 2014-08-19T20:29:18.193 回答