如何国际化文件选择器的按钮文本? 例如,此代码向用户呈现的内容:
<input type="file" />
在我的浏览器中,英文的按钮显示“浏览...”,标签显示“未选择文件。”。如何让浏览器使用不同的语言?
它通常由浏览器提供并且很难更改,因此解决它的唯一方法是 CSS/JavaScript hack,
请参阅以下链接了解一些方法:
纯 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>
退一步! 首先,您假设用户在其设备上使用外国语言环境,这并不是一个合理的假设,无法证明接管文件选择器的按钮文本并使其说出您想要的内容。 您想要控制页面上可见的每一项语言是合理的。 不过,文件上传控件的内容不是 HTML 的一部分。 这个控件背后还有更多的内容,比如在WebKit中,按钮旁边还写着“没有选择文件”。 有一些非常hacky的解决方法尝试这样做(例如@ChristopheD的答案中提到的那些),但没有一个真正成功:
对于屏幕阅读器,文件控件仍会显示“浏览...”或“选择文件”,并且自定义文件上传不会被声明为文件上传控件,而只是一个按钮或文本输入。
其中许多无法显示所选文件,或显示用户已不再选择文件
您确定您通过偏离本机控件来公平对待您的用户,只是为了本地化文本,而一旦他们单击它,他们就会获得操作系统区域设置?
您能为用户做的最好的事情就是确保您有关于文件输入控件的足够的本地化指导。 (例如表单字段标签、提示文本、工具提示文本)。
抱歉。 :-(
--
此答案适用于那些寻找任何理由
不本地化文件上传控件的人。
您将获得按钮的浏览器语言。无法以编程方式更改它。
使用起来更方便
我可以使用 jQueryMobile 实现一个按钮,代码如下:
上面的代码创建了一个“上传”按钮(自定义文本)。单击上传按钮后,将启动文件浏览。使用 Chrome 25 和 IE9 进行测试。
要制作自定义“浏览按钮”解决方案,只需尝试制作隐藏的浏览按钮、自定义按钮或元素以及一些 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());
});
});
实际上,可以使用伪选择器自定义
Upload File