jquery文件下传插件使用指南（fakeUpload）

jquery文件上传插件使用指南（fakeUpload）
插件介绍
html的<input type=”file”>由一个text框和一个button构成。存在如下几个问题：
1、text框中无法初始化一些说明文字。
2、button上的字是浏览器内置的，修改不了，英文版的浏览器是“Browser…”,中文版的浏览器是“浏览…”，导致无法给按钮上的文字国际化。
3、button的样式也是浏览器内置的，控制不了。
要达到下图的效果，type=”file”不可能。

jquery.fakeUpload就是为了解决上述问题而编写的插件。

如何使用
1、导入jquery.fakeUpload.js（当然它是依赖jquery的）
2、在html的body中加入span或div元素

<span id="span1" name="myfile"></span> //name为后台需要接受的文件参数

4、在jquery的ready方法在初始化fakeUpload组件。

$("#span1").fakeUpload("init",{
	tipText:"只可选*.jpg文件",
	btnText:"选择文件...",
	btnWidth:85,
	btnClass:"btn"
});

5、 在页面中通过var path=$(“#span1”).fakeUpload(“getPath”);获取选择的文件path（包含文件名）

方法

init

初始化控件，调用$(“XX”).fakeUpload(“init”,params);

参数

Object，属性介绍如下。

         tipText：String，放在text框中的说明性文字，默认空串。

         width：Number，text框的宽度，默认150。

         btnClass：String，应用在按钮上的Class Name(s)，默认“BUTTON75”。

         btnText：String，按钮上的文字，默认“浏览…”。

         fileCheckFn：Function，选择文件后通过这个回调函数验证文件，文件名会作为函数参数传给回调函数，默认“function(fileName){return true}”。

返回值

jQuery对象。

 

getPath

获取选择的文件全路径，调用$(“XX”).fakeUpload(“getPath”);

参数

无

返回值

String，文件全路径。

源代码如下：

/**
 * 模拟<input type="file" />
 * Author:dengl
 */
(function($){
	var DEFAULT_OPTS={
			"tipText":"",	//提示信息
			"width":150,	//text文本框宽度
			"btnWidth":75,
			"btnClass":"BUTTON75",
			"btnText":"浏览...",
			"fileCheckFn":function(fileName){//文件检查
				return true;
			}
	};
	
	/**
	 * 初始化
	 * @param $t
	 * @param opts
	 * @returns
	 */
	function init($t,opts){
		var _fakeUpload=$t.data('fakeUpload');
		if(!_fakeUpload){
			$t.css({"position":"relative","display":"inline-block"});
			$t.append('<label>'
						+'<input type="text" style="width:'+opts.width+'px;color: #BBBBBB;" readonly="readonly" value="'+opts.tipText+'"/> '
						+'<input type="button" style="width:"'+(opts.btnWidth||75)+'px;" class="'+(opts.btnClass||'BUTTON75')+'" value="'+opts.btnText+'" />'
					+'</label>'
					+'<input type="file" name="'+($t.attr("name")||"")+'" style="position:absolute;right:0px;bottom:5px;z-index:2;opacity:0;filter:alpha(opacity:0);" />');
			$t.removeAttr("name");
			_bindAction($t,opts);
			
			// 为html标签绑定一些数据
			$t.data('fakeUpload',{opts:opts});
		}
	}
	
	/**
	 * 获取文件路径
	 */
	function getPath($t){
		var _fakeUpload=$t.data('fakeUpload');
		if(_fakeUpload){
			var v=$t.find("input[type=text]").val();
			return v==_fakeUpload.opts.tipText?"":v;
		}
		
		return "";
	}
	
	/**
	 * 绑定事件
	 * @param $t
	 * @param opts
	 * @returns
	 */
	function _bindAction($t,opts){
		var $file=$t.find("input[type=file]");
		var $txt=$t.find("input[type=text]");
		
		$file.unbind(".fakeUpload").bind("change.fakeUpload",function(){
			if(opts.fileCheckFn(this.value)){
				if(!this.value){
					$txt.css({"color":"#BBBBBB"});
					$txt.val(opts.tipText);
				}else{
					$txt.css({"color":""});
					$txt.val(this.value);
				}
			}
		});
	}
	
	$.fn.fakeUpload=function(m,opts){
		opts=opts||{};
		switch(m){
		case 'init':
			return this.each(function(){
				var _opts=$.extend({},DEFAULT_OPTS,opts);
				init($(this),_opts);
			});
		case 'getPath':
			return getPath(this);
		}
	};
})(jQuery);