jsp上传文件,隐藏file标签,使用span和text标签展示,代码如下
<span class="mr5">文件名称</span><input type="text" id="fileaddress" class="zqzm_text2 mr5" />
<input type="file" id="filename" style="position:absolute;opacity:0;filter:alpha(opacity=0);width:55px;height:25px;"
name="filename" οnchange="fileaddress.value=this.value;"/>
<span class="zqzm_btn1 mr5" id="liulan">浏览</span>
由于浏览span标签要和file标签处在同一个位置,隐藏file标签。
有的ie版本会出现隐藏不掉的情况,需要在file标签中增加 opacity:0;filter:alpha(opacity=0); 这个样式来解决。
同时span和file标签可能覆盖不全,需要在点击span的时候调用file的点击事件。
点击上传修改text标签的值。
$("#liulan").bind("click",
function(){
$("#filename").click();
}
);
$("#filename").change(
function(){
$("#fileaddress").val($("#filename").val());
}
);