标记文件上传按钮

Question

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

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

Answer 1

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

有关一些方法,请参阅以下链接:

• http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
• http://www.quirksmode.org/dom/inputfile.html
• http://www.dreamincode.net/forums/showtopic15621.htm

Answer 2

退后一步!首先,您假设用户在他们的设备上使用外部区域设置,这不是合理地接管文件选择器的按钮文本并使其说出您想要的内容的合理假设.

您希望控制页面上可见的每种语言都是合理的.但是,文件上载控件的内容不是HTML的一部分.此控件背后有更多内容,例如,在WebKit中,它还在按钮旁边显示"未选择文件".

有很多hacky变种尝试这个(例如@ ChristopheD的答案中提到的那些),但它们都没有真正成功:

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

偏离本机控件始终是一件危险的事情,您的用户可能会使用大量不同的设备,并且无论您选择哪种解决方法,您都不会在每个设备中对其进行测试.

但是,从用户体验的角度来看,所有尝试都失败的原因还有一个更大的原因:此控件后面还有更多的非本地化内容,即文件选择对话框本身.一旦用户访问其文件系统或不选择要上载的文件,他们将受到主机操作系统区域设置的影响.

您是否确定通过偏离本机控制来为您的用户伸张正义,只是为了本地化文本,当他们单击它时,他们只是要获得操作系统区域设置？

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

抱歉.:-(

-

这个答案适用于那些寻求不对文件上传控件进行本地化的理由.

Answer 3

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

Answer 4

纯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

Answer 5

更容易使用它

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