更新前端
This commit is contained in:
季圣华
565
erp_web/js/fileUploadQT/js/fileUpload.js
Normal file
565
erp_web/js/fileUploadQT/js/fileUpload.js
Normal file
@@ -0,0 +1,565 @@
|
||||
/**
|
||||
* 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==""){
|
||||
alert("要设定一个id!");
|
||||
}
|
||||
$.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();
|
||||
}
|
||||
});
|
||||
/**
|
||||
* 上传基本工具和操作
|
||||
*/
|
||||
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":"",//文件上传地址，后台设置的根目录
|
||||
"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){
|
||||
var fileList = uploadFileList.fileList;
|
||||
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=uploadFileList.getFileList();
|
||||
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])){
|
||||
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);
|
||||
|
||||
},
|
||||
/**
|
||||
* 清除选择文件的input
|
||||
* */
|
||||
"cleanFilInputWithSelectFile":function(opt){
|
||||
var uploadId = opt.uploadId;
|
||||
$("#"+uploadId+"_file").remove();
|
||||
},
|
||||
/**
|
||||
* 根据制定信息显示
|
||||
*/
|
||||
"showUploadProgress":function(opt,bytesRead,percent){
|
||||
|
||||
var uploadId = opt.uploadId;
|
||||
var fileListArray = uploadFileList.getFileList();
|
||||
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;
|
||||
var fileList = uploadFileList.getFileList();
|
||||
|
||||
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("fileInfo",fileList[i]);
|
||||
formData.append("fileInfoName",fileList[i].name);
|
||||
console.log(fileList[i].name);
|
||||
}
|
||||
}
|
||||
|
||||
formData.append("filelSavePath",opt.filelSavePath);
|
||||
if(uploadUrl!="#"&&uploadUrl!=""){
|
||||
uploadTools.disableFileUpload(opt);//禁用文件上传
|
||||
uploadTools.disableCleanFile(opt);//禁用清除文件
|
||||
|
||||
$.ajax({
|
||||
type:"post",
|
||||
url:uploadUrl,
|
||||
data:formData,
|
||||
processData : false,
|
||||
contentType : false,
|
||||
/* beforeSend: function(request) {
|
||||
request.setRequestHeader("filePath", file_path);
|
||||
}, */
|
||||
success:function(data){
|
||||
setTimeout(function(){opt.onUpload(opt,data)},500);
|
||||
},
|
||||
error:function(e){
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
}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();
|
||||
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();
|
||||
delete fileListArray[fileCodeId];
|
||||
uploadFileList.setFileList(fileListArray);
|
||||
fileItem.remove();
|
||||
|
||||
},
|
||||
/**
|
||||
* 选择文件按钮事件
|
||||
* @param opt
|
||||
*/
|
||||
"selectFileEvent":function(opt){
|
||||
var uploadId = opt.uploadId;
|
||||
var ismultiple = opt.ismultiple;
|
||||
var inputObj=document.createElement('input');
|
||||
inputObj.setAttribute('id',uploadId+'_file');
|
||||
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.body.appendChild(inputObj);
|
||||
inputObj.click();
|
||||
},
|
||||
/**
|
||||
* 选择文件后对文件的回调事件
|
||||
* @param opt
|
||||
*/
|
||||
"selectFileChangeEvent":function(files,opt){
|
||||
uploadTools.addFileList(files,opt);
|
||||
uploadTools.cleanFilInputWithSelectFile(opt);
|
||||
|
||||
if(opt.autoCommit){
|
||||
uploadEvent.uploadFileEvent(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([]);
|
||||
$("#"+uploadId+" .box").html("");
|
||||
uploadTools.initWithUpload(opt);//初始化上传
|
||||
}
|
||||
}
|
||||
|
||||
var uploadFileList={
|
||||
"fileList":[],
|
||||
"initFileList":function(){
|
||||
uploadFileList.fileList = new Array();
|
||||
},
|
||||
"getFileList":function(){
|
||||
return uploadFileList.fileList;
|
||||
},
|
||||
"setFileList":function(fileList){
|
||||
uploadFileList.fileList = fileList;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user