如图,这是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函数库文件哦。