jsp上传文件，隐藏file标签，使用span和text标签展示

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());
 }
);