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

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

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

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

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

HTML:

</form 

name=”uploadForm”>

name=”upload” onChange=”setFilePath()”></input id=”browsetrue” size=”34″ type=”file”

</input type=”text” id=”browsetext”>

</input id=”browse” type=”button” value=”browse” >

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函数库文件哦。

Facebooktwittergoogle_pluslinkedinmail

Need a translation service?

Please enter your personal details and we will contact you shortly

Words translated by CCJK

146,096,379

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others

Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP