如何修改上传选择框（input[file]）为英文按钮

如图，这是TalentPool项目的一处需求效果，看似简单的一段布局，暗含一个难点：上传选择框（input[file]）默认按钮文字是中文，且不同浏览器解析不一样（“浏览、选择文件”等），而我们要做的是英文网站，所以这个问题亟待解决。

首先想到的就是将”file” />设置透明隐藏起来；再做一个文本框”text” />和按钮 type=”button” value=”Browse” />来模拟上传选择框（input[file]）的样式；然后利用此按钮的click事件触发”file” />的click()来模拟点击效果；最后给”file” />绑定一个change事件将选择获得的路径文本赋给文本框”text” />。做到这里应该算成功了吧，然而在测试的时候发现此方法在IE下行不通，原因是IE中提交表单时会清空表单数据，这一瞬间触发了我加的绑定change事件，从而导致无法提交到选择文件。

头疼了好一会儿，上网搜集这个问题，发现网上的答案大多也是与此类似，可是此方法不可行啊。于是静下心来，从问题点出发考虑，并结合各位前辈提出的问题，经过各种尝试终于得到最完美的解决方案：首先同样是将”file” />设置透明，不过不隐藏，而是至于顶层；再做一个文本框”text” />和按钮 type=”button” value=”Browse” />置于下层并调整样式使之刚好被覆盖；然后给”file” />添加onChange=”setFilePath()”，并在JS中写好一个方法setFilePath()，实现点击后及时赋值给文本框”text” />。另外”file” />的宽度样式设置也很巧妙，用样式width来设置是不起效果的；用内带的size来设置只有IE下有效；而后又发现用JS设置width样式在火狐这类主流浏览器有效，IE无效。这样也不错，可以分别设置这两个值来匹配一个固定的宽度。

到此为止，问题总算得到完美解决。下面分别贴出3部分代码，应该注意的部分已用粗体标注：

HTML: