jsp文件上传隐藏choosefile - inupt标签

默认文件上传样式如下：

<form name="ufm" id="ufm" method="post" action="" enctype="multipart/form-data">
<input type="file"  name="file"  class="file_input"  />
<input type="button" value="上传" class="fileupload" id = "supfm" />
</form>

如下图：

fileupload.png

这个样式真的很难看， 不仅占用面积，还很难看，经过改造变为这样如下这样：

upload_style.png

当用户点击上传按钮的时候弹出文件选择框，然后直接上传文件。

上面使用的样式如下：
html source:

<td align="right">上传图片</td><td style="position:relative;">
<input type="text" value="" name="rico" id="rico" class="menu_text" />    
<input type="file"  name="file"  class="file_input"  onchange="uploadFile();" />    
<input type="button" value="上传" class="fileupload" id = "supfm" /></td>

css:

.fileupload {background-color:#FFF; border:1px solid #CDCDCD;height:32px; width:70px;}
.file_input{ position:absolute; left:370px; top:12px; height:24px;width:260px; z-index: 1; filter:alpha(opacity:0);opacity: 0;}

这样就好看多了，其他前端特殊展示功能可以在函数uploadFile() 中随便调节.

上面实现的方法是： 将file input和上传按钮重叠，且变透明，且在上传按钮之上， 从css中也可以看出来，这样需要我们自动调用上传服务器操作，因为真正的上传按钮已经点不上了. 也可以在选择文件之后切换回来，将上传按钮显示出来。这样用户再点击就是真正的上传了. 这都是可以灵活调节的.