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;width: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="width: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);