Blog

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

如图,这是TalentPool项目的一处需求效果,看似简单的一段布局,暗含一个难点:上传选择框(input[file])默认按钮文字是中文,且不同浏览器解析不一样(“浏览、选择文件”等),而我们要做的是英文网站,所以这个问题亟待解决。 首先想到的就是将<input type=”file” />设置透明隐藏起来;再做一个文本框<input type=”text” />和按钮<input type="button" value=”Browse” />来模拟上传选择框(input[file])的样式;然后利用此按钮的click事件触发<input type=”file” />click()来模拟点击效果;最后给<input type=”file” />绑定一个change事件将选择获得的路径文本赋给文本框<input type=”text” />。做到这里应该算成功了吧,然而在测试的时候发现此方法在IE下行不通,原因是IE中提交表单时会清空表单数据,这一瞬间触发了我加的绑定change事件,从而导致无法提交到选择文件。 头疼了好一会儿,上网搜集这个问题,发现网上的答案大多也是与此类似,可是此方法不可行啊。于是静下心来,从问题点出发考虑,并结合各位前辈提出的问题,经过各种尝试终于得到最完美的解决方案:首先同样是将<input type=”file” />设置透明,不过不隐藏,而是至于顶层;再做一个文本框<input type=”text” />和按钮<input type="button" value=”Browse” />置于<input type=”file” />下层并调整样式使之刚好被<input type=”file” />覆盖;然后给<input type=”file” />添加onChange="setFilePath()",并在JS中写好一个方法setFilePath(),实现点击<input type=”file” />后及时赋值给文本框<input type=”text” />。另外<input type=”file” />的宽度样式设置也很巧妙,用样式width来设置是不起效果的;用内带的size来设置只有IE下有效;而后又发现用JS设置width样式在火狐这类主流浏览器有效,IE无效。这样也不错,可以分别设置这两个值来匹配一个固定的宽度。 到此为止,问题总算得到完美解决。下面分别贴出3部分代码,应该注意的部分已用粗体标注:

HTML: <form name=”uploadForm”> <input id="browseTrue" size="34" type="file" name="upload" onChange="setFilePath()"> <input type="text" id="browseText"> <input id="browse" type="button" value=”Browse” /> </form>

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

Words translated by CCJK

146,096,379

Request a call or contact us

  •  

    Call ccjk.support for professional assistance

  •  

    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00
  •  
    Inquiry Form

    Please take few minutes to fill
    inquiry form and get Free Quote

  •  
    Request a Call

    Click to receive Free Call, Our
    Representative will contact you

  •  
    Leave a Message

    Please leave us a message and
    be as detailed as possible

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


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