解决input type=”file”兼容问题–模拟input上传插件

作者:norion时间:2013年4月28日评论次数:0 条

说起input type=”file”,我想你一定很蛋疼吧!UI画出来的图就长那样,而你做出来偏偏又是那样,boss、产品经理就会在指着你鼻子骂,丫的找你来不是就是为了解决兼容性问题吗?

好吧,我就给你做,怎么弄了,原生的当然不行,模拟呗!原理是将上传控件input type=”file”弄成透明的,然后插入文本框和一个按钮,然后将上传控件浮在文本框上面。

嘿嘿,我把它弄成了一个插件,丫的,下次谁要直接贴代码!!!分享之。。。。宽度之类的自己搞定哦!

jQuery插件代码:

(function ($) {
	/*******************************
	 * @name 模拟input上传插件 v1.0
	 * @author norion
	 * @author blog http://zkeyword.com/
	 * @2013.01.20
	 * @可自由转载及使用,但请注明版权归属
	 *******************************/
	$.fn.inputFill = function (options) {
		options = $.extend({
				cls : null, //定义class
				width : 150,
				height : 26
			}, options);
		var self = this,
		cls = options.cls,
		selfWidth = self[0].offsetWidth ? self[0].offsetWidth : options.width,
		selfHeight = options.height,
		selfParent = self.wrap('<div class="l-input-fill"></div>')
			.parent()
			.append('<input type="text" class="ui-input" /><a href="javascript:void(0);" class="ui-btn ui-btnMain ui-btnMain-cancel"><span>上传</span></a>'),
		btnObj = selfParent.find('.ui-btn'),
		btnObjWidth = btnObj[0].offsetWidth,
		inputObj = selfParent.find('.ui-input:text')
			.addClass(cls ? cls : ''),
		browser = $.browser;
		self.css({
			position : 'absolute',
			top : 0,
			left : 0,
			height : selfHeight,
			opacity : 0,
			filter : 'Alpha(opacity:0)'
		})
		.change(function () {
			inputObj.val(self.val());
			btnObj.val(self.val());
		});
		inputObj.width(selfWidth - btnObjWidth - 13);
		//根据不同的浏览器做相应的调整
		/*if(browser.msie){
		inputObj.width( selfWidth - btnObjWidth );
		}else if(browser.mozilla){
		inputObj.width( selfWidth - btnObjWidth );
		}if(browser.safari){
		inputObj.width( selfWidth - btnObjWidth );
		}if(browser.opera){
		inputObj.width( selfWidth - btnObjWidth );
		};*/

		/*self.css({position:'absolute',top:0,left:0})*/
	};
})(jQuery);

javascript调用:

$('#input-file').inputFill();

html代码:

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

css代码:

.l-input-fill{float:left;position:relative;height:26px;overflow:hidden}

样式等一些细节请根据具体情况解决哦。

标签:

上一篇: 避免中文被浏览器中解析成乱码

下一篇:Unicode编码互转的chrome插件v1.0

相关文章

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注