页面调用:
$('#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);