JS组件系列——自己封装一个上传文件组件

　　页面调用：

$('#fileUpload').cemsUpload({
    errorEmpty:'<s:text name="cupgrade.view.tip.upload.file.error.empty"></s:text>',
    errorLarge:'<s:text name="cupgrade.view.tip.upload.file.error.large"></s:text>',
    errorType:'<s:text name="cupgrade.view.tip.upload.file.error.type"></s:text>',
    progressFileUploading:'<s:text name="cems.soft.progress.fileUploading"></s:text>',
    url:'${basePath}/patch/patchAction_fileUpload.do?to=checkFile',
    img:'${basePath}/scripts/jQuery/plugins/uploadify/hard-drive-upload.png',
    success:function(data){
        $("input[type='file']").removeAttr("disabled");
        $(".fileUploadDiv").removeClass("disOpacity");
        if (data == 'success') {
            $("#fileUpload-queue").html("<div class='checkInfo'><img src='${basePath}/images/cupgrade/upload_ok.png'/><s:text name='cupgrade.view.tip.upload.ok'/></div>");
        }else { 
            $("#fileUpload-queue").html("<div class='checkInfo'><img src='${basePath}/images/cupgrade/upload_fail.png'/>上传失败</div>");
        }
         setTimeout(function(){
            location.reload();
         },2000)
    }
});

　　组件封装：

(function ($) {
    $.fn.cemsUpload = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.cemsUpload');
        }
    };
    var $settings_cemsUpload;
    var methods = {
        init: function (options) {
            $this_cemsUpload = this;
            //创建一些默认值，拓展任何被提供的选项
            $settings_cemsUpload = $.extend({
                'url': '',
                'filesSize': 2048,
                'hz':'.zip',
                'empty':false,
                'img':'${basePath}/scripts/jQuery/plugins/uploadify/hard-drive-upload.png'
            }, options);
            return this.each(function () {
                $(this).attr('style','position: relative;top: 90px;height:78px;300px;background:#e7fbd7').attr('class','fileUploadDiv');
                $(this).append('<input id="fileUpload" name="fileUpload" type="file" multiple="multiple" class="font" style="display:none;">');
                $(this).append('<a id="btn" href="javascript:void(0);" class="btn" style="300px"><img alt="" src="'+$settings_cemsUpload['img']+'"/></a>');
                $(this).append('<div id="fileUpload-queue"></div>');
                $(this).find('#btn').click(methods['openFileChoice']);//给btn绑定click事件
            });

        },
        openFileChoice:function(){
            $(this).prev().bind('change',methods['doFileUpload']);//给input绑定change事件：上传操作
            $(this).prev().click();
        },
        doFileUpload:function(){
            var formData = new FormData();//FormData方法上传二进制文件
            var files = $(this)[0].files;
            //非空验证
            if(!$settings_cemsUpload['empty']){
                if(files.length == 0){
                     showMsg("",$settings_cemsUpload['errorEmpty'],false,function(){}); 
                     $(this).removeAttr("disabled");
                     $(this).parent().removeClass("disOpacity");
                     return;
                }
            }
            var filesSize = 0;
            var hzs = '';
            for(var i=0;i<files.length;i++){
                filesSize+=files[i].size/(1024*1024);
                hzs+=files[i].name.substr(files[i].name.lastIndexOf('.'))+',';
                formData.append("file"+i,files[i]);
            }
            if($settings_cemsUpload['filesSize']!=''){
                //文件大小
                if(filesSize > $settings_cemsUpload['filesSize']){
                    showMsg("",$settings_cemsUpload['errorLarge'],false,function(){}); 
                    $(this).removeAttr("disabled");
                    $(this).parent().removeClass("disOpacity");
                    return;
                }
            }
            //文件后缀
            if($settings_cemsUpload['hz']!=''){
                for(var i=0;i<hzs.split(",").length;i++){
                    if($settings_cemsUpload['hz'].indexOf(hzs.split(",")[i])==-1){
                        showMsg("",$settings_cemsUpload['errorType'],false,function(){});
                        $(this).removeAttr("disabled");
                        $(this).parent().removeClass("disOpacity");
                        return;
                    }
                }
            }
            Loading(true,$settings_cemsUpload['progressFileUploading']);
            var flag=$("input[name='patchFlag']:checked").val();    
            $.ajax({
                type:'post',
                url:$settings_cemsUpload['url']+"&patchFlag="+flag,
                data:formData,
                contentType:false,//不设置Content-Type请求头
                processData:false,//不处理发送的数据
                success:function(data){
                    Loading(false);
                    $settings_cemsUpload['success'](data);
                }
            });
        }
    };
})(jQuery);