使用CSS定义input type=file的样式

使用CSS定义input type=file的样式

2014-07-25 21:39:23|?次阅读|上传:wustguangh【已有?条评论】发表评论

关键词:JavaScript, HTML/CSS, 界面设计|来源:唯设编程网

有两个控件总是让我们想要用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>
<12>
发表评论0条 】
网友评论(共?条评论)..
使用CSS定义input type=file的样式