自定义表单——美化你的文件载入框

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

表单的制作常常给我们带来无比的烦恼,比如说表单中的“input[type="radio"]、input[type="checkbox"]、select和input[type="file"]”之类,我们都无法直接通过样式来达到设计的设计要求,如果为了实现设计的设计的优美效果,我们必须通过CSS和js来实现。前面我们在《自定义表单——jQuery制作个性化Checkbox》一文中一起学习了通过jQuery和CSS3来美化表单中的“input[type="radio"]”和“input[type="checkbox"]”。今天在浏览外国bog时发现Shaun Inman在《style file inputs with css and the dom》教程中使用js和CSS来实现“<input type="file"/>”表单元素。特意整理了一下与大家一起分享。让大家在今年的表单制作中能通过这种方法让你在Web页面制作中使“input[type="file"]”样式修改不在是那么的头疼。

下面我们一起来学习如何让“input[type="file"]”实现下图那种效果:

上图中很明显的告诉我们,前面的是“input[type="file"]”的默认效果,下面的是我们需要实现的效果。要实现下图的效果,我们首先需要从设计师的设计中切出下图:

现在我们知道我们的目标了,下面开始我们一起来学习如何实现上图展示的“input[type="file"]”表单元素效果。

一、HTML Markup

			<form action="" class="form" method="post">
				<label for="" class="cabinet">
					<input type="file" class="file" />
				</label>
			</form>
		

我们给表单元素“<input type="file" />”定义了一个类名“file”,并且在他的外面包裹了一个名叫“cabinet”的“<label>”标签。注:为了配合后面的“SI.Files.js”中的对象,我们最好在这里的包裹元素,以及其“input[type="file"]”元素和包裹他的“label”元素和他们定义的“class”类名都保持不变。当然要是你js比较厉害的话,你要根据你自己的需求去改变也无仿,只要能让他帮你实现功能就OK了。古话说的,不管白猫和黑猫只要能抓到老鼠的就是好猫。

二、CSS Code

			.siFiles  label.cabinet {
				width: 79px;
				height: 22px;
				background: url("images/btn-choose-file.gif") 0 0 no-repeat;
				display: block;
				overflow: hidden;
				cursor: pointer;
			}
			
			.siFiles  input.file {
				position: relative;
				height: 100%;
				width: auto;
				opacity: 0;
				-moz-opacity: 0;
				filter: alpha(opacity=0); 
				filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
			}
		

我们通过上面的CSS样式来帮助我们实现表单元素的美化。当然大家并不一定要按照上面的样式一尘不变,你完全可以根据你自己的设计需求去写你自己需要的样式,我这里只是为了实现上图展示的效果写的一个简单的样式。

三、javaScript Code

下面也是我们今天这个教程中最关键的部分——美化“input[type="file"]”表单元素功能所需的js代码。说实在的,这部分代码我好多没有看懂,但照搬我还是会的。所以我直接从Shaun Inman写的《style file inputs with css and the dom》教程中把代码扣下来放在本站,让大家更好的阅读和学习:

			// STYLING FILE INPUTS 1.0 | Shaun Inman  | 2007-09-07
			if (!window.SI) { var SI = {}; };
			SI.Files =
			{
				bodyClass : 'siFiles',
				fileClass : 'file',
				wrapClass : 'cabinet',
				
				fini : false,
				able : false,
				init : function()
				{
					this.fini = true;
					
					var ie = 0 //@cc_on + @_jscript_version
					if (window.opera || (ie && ie < 5.5) || !document.getElementsByTagName) { return; } // no support for opacity or the DOM
					this.able = true;
					
					var body = document.getElementsByTagName('body')[0];
					body.className += (body.className != '' ? ' ' : '') + this.bodyClass;
				},
				
				stylize : function(elem)
				{
					if (!this.fini) { this.init(); };
					if (!this.able) { return; };
					
					elem.parentNode.file = elem;
					elem.parentNode.onmousemove = function(e)
					{
						if (typeof e == 'undefined') e = window.event;
						if (typeof e.pageY == 'undefined' &&  typeof e.clientX == 'number' && document.documentElement)
						{
							e.pageX = e.clientX + document.documentElement.scrollLeft;
							e.pageY = e.clientY + document.documentElement.scrollTop;
						};

						var ox = oy = 0;
						var elem = this;
						if (elem.offsetParent)
						{
							ox = elem.offsetLeft;
							oy = elem.offsetTop;
							while (elem = elem.offsetParent)
							{
								ox += elem.offsetLeft;
								oy += elem.offsetTop;
							};
						};

						var x = e.pageX - ox;
						var y = e.pageY - oy;
						var w = this.file.offsetWidth;
						var h = this.file.offsetHeight;

						this.file.style.top		= y - (h / 2)  + 'px';
						this.file.style.left	= x - (w - 30) + 'px';
					};
				},
				
				stylizeById : function(id)
				{
					this.stylize(document.getElementById(id));
				},
				
				stylizeAll : function()
				{
					if (!this.fini) { this.init(); };
					if (!this.able) { return; };
					
					var inputs = document.getElementsByTagName('input');
					for (var i = 0; i < inputs.length; i++)
					{
						var input = inputs[i];
						if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass) != -1)
						{
							this.stylize(input);
						};
					};
				}
			};
		

如果要是你和我一样不懂js的话也不用害怕,你只需要把上面的代码完全copy下来,保存成一个文件,我在此处将其保存在项目的“js”目录下,并且使命名为“si.files.js”。js代码扣下来以后,我们需要在项目中引用这个js:

			<script type="text/javascript" src="js/si.files.js"></script>
		

当然大家在引用的时候需要注意您的路径,这一点不用我说应该知道吧。

“si.files.js”载入进来后并没有完成,我们还需要调用它:

			<script type="text/javascript">
				SI.Files.stylizeAll();
			</script>			
		

这一部分怎么调用对于老手来说不用讲了,就慢碰到和我不懂一点js的人,你只要把这段代码放在刚才那个“si.files.js”后面就OK了。上面这个“si.files.js”还提供了两种调用的方法:

1、元素的ID名:

			<script type="text/javascript">
				SI.Files.stylizeById('input-id');
			</script>			
		

这里的“input-id”指的就是你HTML Markup中“input[tpye="file"]”元素的ID名。

2、元素的节点:

			<script type="text/javascript">
				SI.Files.stylize(HTMLInputNode);
			</script>			
		

四、工作原理

首先我们通一样式对其进行了外观的包装,让其达到设计图的要求。我们的包装元素“label”和其背景图片的尺寸刚好匹配了按钮的图像设置。接着我们把“input[type="file"]”元素也就是我们所说的文件输入框本身的透明度设置为“0”,让他产生一种假像的“隐藏”效果,但他仍然是可以点击的。不过这里有一点非常重要“大家不能为了说让“input[type="file"]”达到隐藏效果,直接将其设置为“display:none”和“visibility:hidden”。如果你真的是这样设置,那么你将带来灾难性的后果,你做的一切将是无效的。这一点大家一定要记住了。”最后在通过“si.files.js”实现文件输入框的功能效果。

五、浏览器的兼容性

这种实现方法能在“IE6+”、“Firefox1.5+”、“Safari2+”、“chrome”、“opera”下正常工作。

那么通过上面几步我们就解了一个让我们头痛的表单元素美化工作。有关于上面的代码,大家可以直接到这里下载

不知道大家整明白没有,我只知道一个所以然,因为我不太懂js,但我在本地按上面的方法执行下来,已经达到前面图片展示的效果。如果你要是js知道的,你可以完全整明白,要是和我一样js不懂,就把整个js复制下来按上面的操作一步一步做吧。如果你还是不清楚,你可以直接浏览Shaun Inman写的教程——《style file inputs with css and the dom》。

那么到此有关于使用js和CSS来美化“input[type="file"]”就说到这里了,在结束之前再次感谢Shaun Inman给我们带来这么好的教程《style file inputs with css and the dom》,同时希望大家能喜欢,并且能有所值。如果您有更好的解决方法,也可以和我们一起分享。

如需转载烦请注明出处:W3CPLUS

Zoom Kobe XIII ZK13

如需转载,烦请注明出处:https://www.w3cplus.com/css/style-file-inputs-width-css-and-javascript

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部