有两个控件总是让我们想要用css美化表单的时候非常棘手，一个是是大名鼎鼎的select下拉列表控件，另一个就是本文讨论的文件选择控件input type=file 。本文介绍一种方案，可以使得使用file控件的场合也可以设计出漂亮的用户界面。

原始的file控件是这样的：

乍一看，还以为是一个button控件和text组合而成，但其实它是一个file控件，对应的html代码为：

<input type="file" name="file" /> 

file控件在不同浏览器中的现实效果不一致，于是我们考虑一种变通的方法实现漂亮的file控件，下面使用一段实例来说明这个问题：

<div id="content">
   <form id="form1" runat="server">
     <label>选择文件：</label>
     <input type='text' name='textfield' id='fileName' class='txt' />
     <input type='button'  onClick="xx();" class='btn' value='浏览' />
     <asp:FileUpload ID="fileField" runat="server" CssClass="file" />     
     <p id="errMsg">
       <asp:Label ID="errLabel" runat="server" Text=""></asp:Label>       
     </p>
     <p id="tip"><span class="title">提示：</span>
     <span>1.仅支持.jpg,.png.gif格式的图像文件;</span>
     <span>2.上传文件的大小不要超过500kb;</span>
     <span>3.为保证展示效果，建议使用高宽比为4:3的图片.</span>
     </p>
     <asp:Button ID="SubmitUpload" runat="server" Text="上 传" CssClass="submit"
            onclick="SubmitUpload_Click"  />
   </form>
</div> 

我们的基本思虑是将file控件隐藏起来，用户点击按钮的时候调用file控件的点击事件，具体的js代码如下：

<script language="javascript">
function xx()
{
    document.getElementById("fileField").click();     
}
jQuery("#fileField").change(function(){
	jQuery("#fileName").val(jQuery(this).val());	
});
jQuery("#btn_close").click(function(){	
	if (window.top == window) {
		window.close();
	} else {	
		if(window.parent.UploadFilePanelCmt)
			window.parent.UploadFilePanelCmt.hidePanel();
	}
});
$(document).ready(function(){
	var tipMsg = jQuery("span#errLabel").text();
	if(tipMsg.indexOf("文件上传成功")!=-1){		
		if(window.parent.UploadFilePanelCmt)
			window.parent.UploadFilePanelCmt.hidePanel();
	}
});
</script>