You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

590 lines
21 KiB
Plaintext

11 months ago
/**
* 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="<div class='fileType'>"+fileType+"</div> <i class='iconfont icon-wenjian'></i>";//默认显示类型
if(isImg){
if(isImgUrl!=null&&isImgUrl!="null"&&isImgUrl!=""){//图片显示类型
showTypeStr = "<img src='"+isImgUrl+"'/>";
}
}
var modelStr="";
modelStr+="<div class='fileItem' fileCodeId='"+fileCodeId+"'>";
modelStr+="<div class='imgShow'>";
modelStr+=showTypeStr;
modelStr+=" </div>";
modelStr+=" <div class='progress'>";
modelStr+="<div class='progress_inner'></div>";
modelStr+="</div>";
modelStr+="<div class='status'>";
modelStr+="<i class='iconfont icon-shanchu'></i>";
modelStr+="</div>";
modelStr+=" <div class='fileName'>";
modelStr+=fileName;
modelStr+="</div>";
modelStr+=" </div>";
return modelStr;
},
/**
* 初始化布局
* @param opt 参数对象
*/
"initWithLayout":function(opt){
var uploadId = opt.uploadId;
//选择文件和上传按钮模板
var btsStr = "";
btsStr += "<div class='uploadBts'>";
btsStr += "<div>";
btsStr += "<div class='selectFileBt'>选择文件</div>";
btsStr += "</div>";
btsStr += "<div class='uploadFileBt'>";
btsStr += "<i class='iconfont icon-shangchuan'></i>";
btsStr += " </div>";
btsStr += "<div class='cleanFileBt'>";
btsStr += "<i class='iconfont icon-qingchu'></i>";
btsStr += " </div>";
btsStr += "</div>";
$("#"+uploadId).append(btsStr);
//添加总进度条
if(opt.showSummerProgress){
var summerProgressStr = "<div class='subberProgress'>";
summerProgressStr += "<div class='progress'>";
summerProgressStr += "<div>0%</div>";
summerProgressStr += "</div>";
summerProgressStr += " </div>";
$("#"+uploadId).append(summerProgressStr);
}
//添加文件显示框
//var boxStr = "<div class='box'></div>";
//$("#"+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;i<arrays.length;i++){
if(strFound==arrays[i]){
ishave = true;
break;
}
}
return ishave;
},
/**
* 文件是否已经存在
* */
"fileIsExit":function(file,opt){
var fileList = uploadFileList.getFileList(opt);
var ishave = false;
for(var i=0;i<fileList.length;i++){
//文件名相同,文件大小相同
if(fileList[i]!=null&&fileList[i].name ==file.name&&fileList[i].size==file.size){
ishave = true;
}
}
return ishave;
},
/**
* 添加文件到列表
* */
"addFileList":function(fileList,opt){
var uploadId = opt.uploadId;
//var boxJsObj = $("#"+uploadId+" .box").get(0);
var fileListArray=[];
var fileNumber = uploadTools.getFileNumber(opt);
if(fileNumber+fileList.length>opt.maxFileNumber){
alert("最多只能上传"+opt.maxFileNumber+"个文件");
return;
}
var imgtest=/image\/(\w)*/;//图片文件测试
var fileTypeArray = opt.fileType;//文件类型集合
var fileSizeLimit = opt.size;//文件大小限制
for(var i=0;i<fileList.length;i++){
//判断文件是否存在
if(uploadTools.fileIsExit(fileList[i],opt)){
alert("文件("+fileList[i].name+")已经存在!");
continue;
}
var fileTypeStr = uploadTools.getSuffixNameByFileName(fileList[i].name);
//文件大小显示判断
if(fileSizeLimit!=-1&&fileList[i].size>(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;i<fileListArray.length;i++){
if(fileListArray[i]==null){
continue;
}
var testbytesRead =bytesRead -fileListArray[i].size;
if(testbytesRead<0){
if(percent==100){
$("#"+uploadId+" .box .fileItem[fileCodeId='"+i+"'] .progress>div").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,
success: function (data) {
if (typeof AfterAthUploadOver === 'function')
AfterAthUploadOver(AthParams.FK_MapData, AthParams.PKVal, data);
setTimeout(function () { opt.onUpload(opt, data) }, 500);
},
error: function (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;i<fileList.length;i++){
if(fileList[i]!=null){
number++;
}
}
return number;
}
}
/**
* 上传事件操作
* */
var uploadEvent = {
/**
* 拖动时操作事件
*/
"dragListingEvent":function(e,opt){
e.preventDefault();//取消默认浏览器拖拽效果 
var fileList = e.dataTransfer.files;//获取文件对象
uploadTools.addFileList(fileList,opt);
if(opt.autoCommit){
uploadEvent.uploadFileEvent(opt);
}
},
/**
* 删除文件对应的事件
* */
"deleteFileEvent":function(opt,obj){
var fileItem = $(obj).parent().parent();
var fileCodeId = fileItem.attr("fileCodeId");
var fileListArray = uploadFileList.getFileList(opt);
delete fileListArray[fileCodeId];
uploadFileList.setFileList(fileListArray,opt);
fileItem.remove();
},
/**
* 选择文件按钮事件
* @param opt
*/
"selectFileEvent": function (opt) {
var uploadId = opt.uploadId;
var ismultiple = opt.ismultiple;
var inputObj=document.createElement('input');
inputObj.setAttribute('id', "file_"+opt.FK_FrmAttachment);
inputObj.setAttribute('name', "file_" + opt.FK_FrmAttachment);
inputObj.setAttribute('type','file');
inputObj.setAttribute("style",'visibility:hidden');
if(ismultiple){//是否选择多文件
inputObj.setAttribute("multiple","multiple");
}
//inputObj.setAttribute("onchange","uploadEvent.selectFileChangeEvent(this.files,"+opt+")");
$(inputObj).on("change",function(){
uploadEvent.selectFileChangeEvent(this.files,opt);
});
document.forms[0].appendChild(inputObj);
inputObj.click();
},
/**
* 选择文件后对文件的回调事件
* @param opt
*/
"selectFileChangeEvent": function (files, opt) {
if (IsIELower10 == false) {
uploadTools.addFileList(files, opt);
uploadTools.cleanFilInputWithSelectFile(opt);
}
if(opt.autoCommit){
uploadEvent.uploadFileEvent(opt);
uploadTools.cleanFilInputWithSelectFile(opt);
}
},
/**
* 上传文件的事件
* */
"uploadFileEvent":function(opt){
opt.beforeUpload(opt);
uploadTools.uploadFile(opt);
},
/**
* 清除文件事件
*/
"cleanFileEvent":function(opt){
var uploadId = opt.uploadId;
if(opt.showSummerProgress){
$("#"+uploadId+" .subberProgress").css("display","none");
$("#"+uploadId+" .subberProgress .progress>div").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;
}
}