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或p元素

[javascript] 
<span id="span1" name="myfile"></span> //name為後臺需要接受的文件參數 
4、在jquery的ready方法在初始化fakeUpload組件。

[javascript]
$("#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,文件全路徑。

源代碼如下:

[javascript] 
/**
 * 模擬<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); 

 

發佈留言