Html 标记文件上载按钮

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

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

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

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

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

---

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

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

HTML:

JS:

---

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

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

有一些非常老套的变通方法试图做到这一点（如@ChristopheD的回答中提到的方法），但没有一种方法真正成功：

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

偏离本机控件始终是一件危险的事情，您的用户可能会使用大量不同的设备，并且无论您选择什么解决方法，您都不会在这些设备中的每一个上进行测试

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

你确定你偏离了本机控件，只是为了使文本本地化，而用户一点击它，他们就会得到操作系统的区域设置，这对用户来说是公平的吗

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

对不起-(

--

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

纯CSS解决方案：

.inputfile{
/*可见性：隐藏等不起作用*/
宽度：0.1px；
高度：0.1px；
不透明度：0；
溢出：隐藏；
位置：绝对位置；
z指数：-1；
}
.inputfile:焦点+标签{
/*键盘导航*/
轮廓：1个点#000；
外形：-webkit聚焦环颜色自动5px；
}
.inputfile+标签*{
指针事件：无；
}

选择一个文件（单击我）

使用它要容易得多

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

我喜欢你的答案，因为这意味着我不必做任何事情=），但你下面的解决方案看起来会奏效的（看起来是这样的！）使用JavaScript可以做到这一点，但要小心，这对禁用JS的用户不起作用，最终会导致不同的布局。最重要的是，你会首先看到一个布局（典型的按钮），在一个小的延迟后，通过JS的改变，“你下面的解决方案”，当我看到它的时候；Seb是最后一个答案：）请注意，浏览器可能会触发点击劫持警告（目前在FF+NoScript和IE9，IIRC中），因为这是相同的技术方法。这是这里问题的唯一正确答案。在不提醒用户这一事实的情况下，重新设置文件输入元素的样式相对简单。

#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;
}

$("#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"/>