标签file uploadbutton

如何国际化文件select器的button文本? 例如,这个代码给用户的是什么:

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

它通常由浏览器提供,难以改变,所以唯一的解决办法是CSS / JavaScript hack,

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

你得到你的浏览器的语言为您的button。 没有办法以编程方式更改它。

退后一步! 首先,你假设用户在他们的设备上使用了一个国外的语言环境,这不是一个合理的假设来接pipe文件select器的button文本,并说明想要的东西。

您希望控制页面上可见的每一种语言是合理的。 file upload控件的内容不是HTML的一部分。 这个控件背后有更多的内容,例如在WebKit中,它还会在button旁边显示“没有select文件”。

有一些非常冒险的解决方法可以尝试(例如@ ChristopheD的答案中提到的那些),但是没有一个真正成功:

  • 对于屏幕阅读器,文件控件仍然会说“浏览…”或“select文件”,并且自定义file upload不会被公布为file upload控件,而只是一个button或文本input。
  • 他们中的许多人不能显示所选文件,或者显示用户不再select文件
  • 他们中的许多人看起来不像本地控制,所以在非标准设备上看起来可能会很奇怪。
  • 键盘支持通常很差。
  • 作者创build的用户界面组件永远不可能像其本地对等function一样完全正常运行(并且越接近于假设Windows 7上的IE10越偏离其他浏览器和操作系统组合)。
  • 现代浏览器支持拖放到本机file upload控制。
  • 一些技术可能触发安全软件的启发式攻击,作为诱骗用户上传文件的一种潜在的“点击式”尝试。

偏离原生控件总是一件有风险的事情,有许多用户可以使用的不同设备,无论您select哪种解决方法,您都不会在每一台设备上进行testing。

然而,从用户体验的angular度来看,所有尝试都失败的原因还有更大的原因:在这个控件背后还有更多的非本地化内容,即文件select对话框本身。 一旦用户需要遍历他们的文件系统,或者不select要上传的文件,他们将受到主机操作系统区域设置的限制。

你确定通过偏离本机控制来做你的用户的任何正义,只是为了本地化的文本,当他们点击它,他们只是要获得操作系统语言环境吗?

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

抱歉。 🙁

这个答案是为那些寻找任何理由本地化file upload控制。

纯CSS解决scheme:

 .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> 

我可以用下面的代码实现一个使用jQueryMobile的button:

 <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;"/> 

以上代码创build一个“上传”button(自定义文本)。 点击上传button,文件浏览启动。 使用Chrome 25和IE9进行testing。

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

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

更容易使用它

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