标记文件上传按钮

问题描述 投票:0回答:8

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

     <input type="file" />

在我的浏览器中,英文的按钮显示“浏览...”,标签显示“未选择文件。”。如何让浏览器使用不同的语言?

html internationalization dialog
8个回答
35
投票

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

请参阅以下链接了解一些方法:


23
投票

纯 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


19
投票

退一步! 首先,您假设用户在其设备上使用外国语言环境,这并不是一个合理的假设,无法证明接管文件选择器的按钮文本并使其说出您想要的内容。 您想要控制页面上可见的每一项语言是合理的。 不过,文件上传控件的内容不是 HTML 的一部分。 这个控件背后还有更多的内容,比如在WebKit中,按钮旁边还写着“没有选择文件”。 有一些非常hacky的解决方法尝试这样做(例如@ChristopheD的答案中提到的那些),但没有一个真正成功:

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

其中许多无法显示所选文件,或显示用户已不再选择文件
  • 其中许多看起来与本机控件完全不同,因此在非标准设备上可能看起来很奇怪。
  • 键盘支持通常很差。
  • 作者创建的 UI 组件永远不可能像其本机等效组件那样功能齐全(并且它的行为越接近假设 Windows 7 上的 IE10,它与其他浏览器和操作系统组合的偏离就越大)。
  • 现代浏览器支持拖放到本机文件上传控件中。
  • 某些技术可能会触发安全软件中的启发式方法,作为潜在的“点击劫持”尝试欺骗用户上传文件。
  • 偏离本机控件始终是一件有风险的事情,您的用户可能使用大量不同的设备,无论您选择什么解决方法,您都不会在每一个设备上进行测试。
  • 但是,从用户体验的角度来看,所有尝试都失败还有一个更大的原因:此控件(文件选择对话框本身)背后还有更多非本地化内容。 一旦用户需要遍历其文件系统或不选择要上传的文件,他们将受到主机操作系统区域设置的影响。

您确定您通过偏离本机控件来公平对待您的用户,只是为了本地化文本,而一旦他们单击它,他们就会获得操作系统区域设置?

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

抱歉。 :-(

--

此答案适用于那些寻找任何理由

本地化文件上传控件的人。

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


13
投票

使用起来更方便


12
投票

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

3
投票

上面的代码创建了一个“上传”按钮(自定义文本)。单击上传按钮后,将启动文件浏览。使用 Chrome 25 和 IE9 进行测试。


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

示例。

0
投票

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

实际上,可以使用伪选择器自定义 
Upload File

0
投票
::file-selector-button

查看更多信息:
MDN ::文件选择器按钮 - CSS

© www.soinside.com 2019 - 2024. All rights reserved.