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);