如何修改上传选择框(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:
name=”uploadForm”>
name=”upload” onChange=”setFilePath()”>
CSS:
#browseTrue {
position:absolute;
z-index:2;
}
#browseText, #browse {
position:relative;
z-index:1;
}
#browseText {
width:190px;
padding:3px;
border:1px solid #d0d0d0;
}
#browse {
background:#eee;
border:1px solid #ccc;
height:23px;
padding:0 16px;
color:#666;
}
JS:
$(function(){
$(“#browseTrue”).css({“opacity”:”0″,”width”:”278px”,”height”:”24px”});
});
function setFilePath(){
$(“#browseText”).val(document.forms[“uploadForm“].upload.value);
};
记得还要调用jQuery函数库文件哦。
Need a translation service?
Please enter your personal details and we will contact you shortly
Words translated by CCJK
146,096,379Over 95% of our clients recommend our language services to others