标签文件上传按钮答案

【问题标题】：Labeling file upload button标签文件上传按钮
【发布时间】：2010-10-15 18:33:43
【问题描述】：

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

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

【问题讨论】：

stackoverflow.com/questions/1944267/…

标签： html internationalization dialog

【解决方案1】：

您可以为按钮获取浏览器的语言。无法以编程方式更改它。

【讨论】：

我喜欢你的回答，因为这意味着我不需要做任何事情 =) 但是你下面的解决方案看起来可以工作
好像是这样！ :) 使用 JavaScript 可以解决问题，但要小心，它不适用于禁用 JS 的用户，并且您最终会得到不同的布局。最重要的是，您会首先看到一个布局（典型的按钮），稍等片刻之后，就会通过 JS 进行更改。
“你下面的解决方案”，当我在看它时； Seb 是最后一个答案 :)

【解决方案2】：

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

查看以下链接了解一些方法：

【讨论】：

请注意，浏览器可能会触发点击劫持警告（目前在 FF+NoScript 和 IE9、IIRC 中），因为这是相同的技术方法。
这是这里问题的唯一正确答案。在不提醒用户注意这一事实的情况下，重新设置文件输入元素的样式相对简单。

【解决方案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 测试。

【讨论】：

【解决方案4】：

要制作自定义“浏览按钮”解决方案，只需尝试制作隐藏的浏览按钮、自定义按钮或元素以及一些 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());
    });
});

【讨论】：

【解决方案5】：

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

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

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

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

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

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

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

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

对不起。 :-(

--

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

【讨论】：

【解决方案6】：

纯 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

【讨论】：

选择文件后怎么办？我看不到它
@random_18 这就是诀窍，“文件”输入并不真正可见，标签是......

【解决方案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"/>

【讨论】：