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