/** * Created by zxm on 2017/3/10. */ $.fn.extend({ "initUpload":function(opt) { if (typeof opt != "object") { alert('参数错误!'); return; } var uploadId = $(this).attr("id"); if(uploadId==null||uploadId==""){ return; } $.each(uploadTools.getInitOption(uploadId), function (key, value) { if (opt[key] == null) { opt[key] = value; } }); uploadTools.initWithLayout(opt);//初始化布局 uploadTools.initWithDrag(opt);//初始化拖拽 uploadTools.initWithSelectFile(opt);//初始化选择文件按钮 uploadTools.initWithUpload(opt);//初始化上传 uploadTools.initWithCleanFile(opt); uploadFileList.initFileList(opt); AthParams.Opt = opt; } }); /** * 上传基本工具和操作 */ var uploadTools = { /** * 基本配置参数 * @param uploadId * @returns {{uploadId: *, url: string, autoCommit: string, canDrag: boolean, fileType: string, size: string, ismultiple: boolean, showSummerProgress: boolean}} */ "getInitOption":function(uploadId){ //url test测试需要更改 var initOption={ "uploadId":uploadId, "uploadUrl":"#",//必须,上传地址 "progressUrl":"#",//可选,获取进去信息的url "autoCommit":false,//是否自动上传 "canDrag":true,//是否可以拖动 "fileType":"*",//文件类型 "size":"-1",//文件大小限制,单位kB "ismultiple":true,//是否选择多文件 "showSummerProgress":true,//显示总进度条 "filelSavePath": "",//文件上传地址,后台设置的根目录 "FK_FrmAttachment": "", "IsExpCol":false, "beforeUpload":function(){//在上传前面执行的回调函数 }, "onUpload":function(){//在上传之后 //alert("hellos"); } }; return initOption; }, /** * 初始化文件上传 * @param opt */ "initWithUpload":function(opt){ var uploadId = opt.uploadId; $("#"+uploadId+" .uploadBts .uploadFileBt").on("click",function(){ uploadEvent.uploadFileEvent(opt); }); $("#"+uploadId+" .uploadBts .uploadFileBt i").css("color","#0099FF"); }, /** * 初始化清除文件 * @param opt */ "initWithCleanFile":function(opt){ var uploadId = opt.uploadId; $("#"+uploadId+" .uploadBts .cleanFileBt").on("click",function(){ uploadEvent.cleanFileEvent(opt); }); $("#"+uploadId+" .uploadBts .cleanFileBt i").css("color","#0099FF"); }, /** * 初始化选择文件按钮 * @param opt */ "initWithSelectFile":function(opt){ var uploadId = opt.uploadId; $("#"+uploadId+" .uploadBts .selectFileBt").on("click",function(){ uploadEvent.selectFileEvent(opt); }); }, /** * 返回显示文件类型的模板 * @param isImg 是否式图片:true/false * @param fileType 文件类型 * @param fileName 文件名字 * @param isImgUrl 如果事文件时的文件地址默认为null */ "getShowFileType":function(isImg,fileType,fileName,isImgUrl,fileCodeId){ var showTypeStr="
"+fileType+"
";//默认显示类型 if(isImg){ if(isImgUrl!=null&&isImgUrl!="null"&&isImgUrl!=""){//图片显示类型 showTypeStr = ""; } } var modelStr=""; modelStr+="
"; modelStr+="
"; modelStr+=showTypeStr; modelStr+="
"; modelStr+="
"; modelStr+="
"; modelStr+="
"; modelStr+="
"; modelStr+=""; modelStr+="
"; modelStr+="
"; modelStr+=fileName; modelStr+="
"; modelStr+="
"; return modelStr; }, /** * 初始化布局 * @param opt 参数对象 */ "initWithLayout":function(opt){ var uploadId = opt.uploadId; //选择文件和上传按钮模板 var btsStr = ""; btsStr += "
"; btsStr += "
"; btsStr += "
选择文件
"; btsStr += "
"; btsStr += "
"; btsStr += ""; btsStr += "
"; btsStr += "
"; btsStr += ""; btsStr += "
"; btsStr += "
"; $("#"+uploadId).append(btsStr); //添加总进度条 if(opt.showSummerProgress){ var summerProgressStr = "
"; summerProgressStr += "
"; summerProgressStr += "
0%
"; summerProgressStr += "
"; summerProgressStr += "
"; $("#"+uploadId).append(summerProgressStr); } //添加文件显示框 //var boxStr = "
"; //$("#"+uploadId).append(boxStr); }, /** * 初始化拖拽事件 * @param opt 参数对象 */ "initWithDrag":function(opt){ var canDrag = opt.canDrag; var uploadId = opt.uploadId; if(canDrag){ $(document).on({ dragleave:function(e){//拖离  e.preventDefault(); }, drop:function(e){//拖后放  e.preventDefault(); }, dragenter:function(e){//拖进  e.preventDefault(); }, dragover:function(e){//拖来拖去  e.preventDefault(); } }); var box = $("#"+uploadId+" .box").get(0); if(box!=null){ //验证图片格式,大小,是否存在 box.addEventListener("drop",function(e) { uploadEvent.dragListingEvent(e,opt); }); } } }, /** * 删除文件 * @param opt */ "initWithDeleteFile":function(opt){ var uploadId = opt.uploadId; $("#"+uploadId+" .fileItem .status i").on("click",function(){ uploadEvent.deleteFileEvent(opt,this); }) }, /** * 获取文件名后缀 * @param fileName 文件名全名 * */ "getSuffixNameByFileName":function(fileName){ var str = fileName; var pos = str.lastIndexOf(".")+1; var lastname = str.substring(pos,str.length); return lastname; }, /** * 判断某个值是否在这个数组内 * */ "isInArray":function(strFound,arrays){ var ishave = false; for(var i=0;iopt.maxFileNumber){ alert("最多只能上传"+opt.maxFileNumber+"个文件"); return; } var imgtest=/image\/(\w)*/;//图片文件测试 var fileTypeArray = opt.fileType;//文件类型集合 var fileSizeLimit = opt.size;//文件大小限制 for(var i=0;i(fileSizeLimit*1000)){ alert("文件("+fileList[i].name+")超出了大小限制!请控制在"+fileSizeLimit+"KB内"); continue; } //文件类型判断 if(fileTypeArray=="*"||uploadTools.isInArray(fileTypeStr,fileTypeArray)){ var fileTypeUpcaseStr = fileTypeStr.toUpperCase(); if(imgtest.test(fileList[i].type)){ //var imgUrlStr = window.webkitURL.createObjectURL(fileList[i]);//获取文件路径 var imgUrlStr ="";//获取文件路径 if (window.createObjectURL != undefined) { // basic imgUrlStr = window.createObjectURL(fileList[i]); } else if (window.URL != undefined) { // mozilla(firefox) imgUrlStr = window.URL.createObjectURL(fileList[i]); } else if (window.webkitURL != undefined) { // webkit or chrome imgUrlStr = window.webkitURL.createObjectURL(fileList[i]); } var fileModel = uploadTools.getShowFileType(true,fileTypeUpcaseStr,fileList[i].name,imgUrlStr,fileListArray.length); //$(boxJsObj).append(fileModel); }else{ var fileModel = uploadTools.getShowFileType(true,fileTypeUpcaseStr,fileList[i].name,null,fileListArray.length); //$(boxJsObj).append(fileModel); } uploadTools.initWithDeleteFile(opt); fileListArray[fileListArray.length] = fileList[i]; }else{ alert("不支持该格式文件上传:"+fileList[i].name); } } uploadFileList.setFileList(fileListArray,opt); }, /** * 清除选择文件的input * */ "cleanFilInputWithSelectFile":function(opt){ var uploadId = opt.uploadId; $("#file_"+opt.FK_FrmAttachment).remove(); }, /** * 根据制定信息显示 */ "showUploadProgress":function(opt,bytesRead,percent){ var uploadId = opt.uploadId; var fileListArray = uploadFileList.getFileList(opt); if(opt.showSummerProgress){ var progressBar = $("#"+uploadId+" .subberProgress .progress>div"); progressBar.css("width",percent+"%"); progressBar.html(percent+"%"); } for(var i=0;idiv").addClass("error"); $("#"+uploadId+" .box .fileItem[fileCodeId='"+i+"'] .progress>div").css("width","100%"); $("#"+uploadId+" .box .fileItem[fileCodeId='"+i+"'] .status>i").addClass("iconfont icon-cha"); bytesRead = bytesRead-fileListArray[i].size; }else{ $("#"+uploadId+" .box .fileItem[fileCodeId='"+i+"'] .progress>div").css("width",(bytesRead/fileListArray[i].size*100)+"%"); break; } }else if(testbytesRead>=0){ $("#"+uploadId+" .box .fileItem[fileCodeId='"+i+"'] .status>i").addClass("iconfont icon-gou"); $("#"+uploadId+" .box .fileItem[fileCodeId='"+i+"'] .progress>div").css("width","100%"); bytesRead = bytesRead-fileListArray[i].size; } } }, /** * 上传文件失败集体显示 * @param opt */ "uploadError":function(opt){ var uploadId = opt.uploadId; $("#"+uploadId+" .box .fileItem .progress>div").addClass("error"); $("#"+uploadId+" .box .fileItem .progress>div").css("width","100%"); $("#"+uploadId+" .box .fileItem .status>i").addClass("iconfont icon-cha"); var progressBar = $("#"+uploadId+" .subberProgress .progress>div"); progressBar.css("width","0%"); progressBar.html("0%"); }, /** * 上传文件 */ "uploadFile":function(opt){ var uploadUrl = opt.uploadUrl; if (uploadUrl != "#" && uploadUrl != "") { uploadTools.disableFileUpload(opt);//禁用文件上传 uploadTools.disableCleanFile(opt);//禁用清除文件 if (IsIELower10 == false) { var fileList = uploadFileList.getFileList(opt); var formData = new FormData(); var fileNumber = uploadTools.getFileNumber(opt); if (fileNumber <= 0) { alert("没有文件,不支持上传"); return; } for (var i = 0; i < fileList.length; i++) { if (fileList[i] != null) { formData.append("file", fileList[i]); //numOfAths++; ////判断附件上传最大数量 //if (topNumOfUpload < numOfAths) { // alert("您最多上传[" + topNumOfUpload + "]个附件"); // return; //} } } if (opt.otherData != null && opt.otherData != "") { for (var j = 0; j < opt.otherData.length; j++) { formData.append(opt.otherData[j].name, opt.otherData[j].value); } } AthParams.Opt = opt; formData.append("filelSavePath", opt.filelSavePath); $.ajax({ type: "post", url: uploadUrl, data: formData, processData: false, contentType: false, dataType: 'html', success: function (data) { if (typeof AfterAthUploadOver === 'function') AfterAthUploadOver(AthParams.FK_MapData, AthParams.PKVal, data); setTimeout(function () { opt.onUpload(opt, data) }, 500); }, error: function (e) { console.log(e); } }); } else { UploadChangeAth(uploadUrl, opt.FK_FrmAttachment); } }else{ uploadTools.disableFileUpload(opt);//禁用文件上传 uploadTools.disableCleanFile(opt);//禁用清除文件 } uploadTools.getFileUploadPregressMsg(opt); }, /** * 获取文件上传进度信息 */ "getFileUploadPregressMsg":function(opt){ var uploadId = opt.uploadId; var progressUrl = opt.progressUrl; if(opt.showSummerProgress){ $("#"+uploadId+" .subberProgress").css("display","block"); } $("#"+uploadId+" .box .fileItem .status>i").removeClass(); if(progressUrl!="#"&&progressUrl!="") { var intervalId = setInterval(function(){ $.get(progressUrl,{},function(data,status){ console.log(data); var percent = data.percent; var bytesRead = data.bytesRead; if(percent >= 100){ clearInterval(intervalId); percent = 100;//不能大于100 uploadTools.initWithCleanFile(opt); } uploadTools.showUploadProgress(opt, bytesRead, percent); },"json"); },500); }else{ var percent = 0; var bytesRead = 0; var intervalId = setInterval(function(){ percent+=5; bytesRead+=50000; if(percent >= 100){ clearInterval(intervalId); percent = 100;//不能大于100 uploadTools.initWithCleanFile(opt); } uploadTools.showUploadProgress(opt, bytesRead, percent); },500); } }, /** * 禁用文件上传 */ "disableFileUpload":function(opt){ var uploadId = opt.uploadId; $("#"+uploadId+" .uploadBts .uploadFileBt").off(); $("#"+uploadId+" .uploadBts .uploadFileBt i").css("color","#DDDDDD"); }, /** * 禁用文件清除 */ "disableCleanFile":function(opt){ var uploadId = opt.uploadId; $("#"+uploadId+" .uploadBts .cleanFileBt").off(); $("#"+uploadId+" .uploadBts .cleanFileBt i").css("color","#DDDDDD"); }, /** * 获取文件个数 * @param opt */ "getFileNumber":function(opt){ var number = 0; var fileList = uploadFileList.getFileList(opt); for(var i=0;idiv").css("width","0%"); $("#"+uploadId+" .subberProgress .progress>div").html("0%"); } uploadTools.cleanFilInputWithSelectFile(opt); uploadFileList.setFileList([], opt); this.files = []; $("#"+uploadId+" .box").html(""); uploadTools.initWithUpload(opt);//初始化上传 } } var uploadFileList = { "initFileList":function(opt){ opt.fileList = new Array(); }, "getFileList":function(opt){ return opt.fileList; }, "setFileList":function(fileList,opt){ opt.fileList = fileList; } }