layui.define(['tool'],function(exports){ let layer = layui.layer,element = layui.element,tool=layui.tool,form = layui.form,upload = layui.upload,uploadIndex=0; // 查找指定的元素在数组中的位置 Array.prototype.indexOf = function (val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) { return i; } } return -1; }; // 通过索引删除数组元素 Array.prototype.remove = function (val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } }; //格式化文件大小 function renderSize(value){ if(null==value||value==''){ return "0 Bytes"; } var unitArr = new Array("Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"); var index=0; var srcsize = parseFloat(value); index=Math.floor(Math.log(srcsize)/Math.log(1024)); var size =srcsize/Math.pow(1024,index); size=size.toFixed(2);//保留的小数位数 return size+unitArr[index]; } //是否是对象 let isObject = function(obj) { return Object.prototype.toString.call(obj) === '[object Object]'; } const opts={ "title":'上传文件', "url":'/api/index/upload', "target":'uploadBtn', "targetBox":'uploadBox', "use":'attachment',//attachment(附件上传),shard(大文件分片上传),single(单图上传),multi(多图上传),import(excel导入上传) "attachment":{ "type":0,//0ajax多文件模式，1ajax单文件单记录模式 "exts": 'png|jpg|gif|jpeg|doc|docx|ppt|pptx|xls|xlsx|pdf|zip|rar|7z|txt|wps|avi|wmv|mpg|mov|rm|flv|mp4|mp3|wav|wma|flac|midi|dwg|dxf|dwt|xmind', //只允许上传文件格式 "colmd":4, "uidDelete":false,//是否开启只有上传人自己才能删除自己的附件 "ajaxSave":null, "ajaxDelete":null }, "shard":{ "exts": 'png|jpg|gif|jpeg|doc|docx|ppt|pptx|xls|xlsx|pdf|zip|rar|7z|txt|wps|avi|wmv|mpg|mov|rm|flv|mp4|mp3|wav|wma|flac|midi|dwg|dxf|dwt|xmind', //只允许上传文件格式 }, "single":{ "exts": 'png|jpg|gif|jpeg', }, "multi":{ "exts": 'png|jpg|gif|jpeg', "type":1, "max":31, }, "import":{ "exts": 'xls|xlsx', "template":null, "tips":'如果导入失败，请根据提示注意检查表格数据。' }, "callback": null }; var uploadPlus = function(options){ this.settings = $.extend(true,{},opts, options); this.settings.index = uploadIndex; uploadIndex++; let me=this; switch (me.settings.use) { case "shard": //分片上传 me.shardUpload(); break; case "single": me.singleImage(); break; case "multi": if(isObject(me.settings.target)){ me.multiImage(); } else{ $('#'+me.settings.target).click(function(){ me.multiImage(); }); } break; case "import": me.excelImport(); break; default: me.attachment(); } }; uploadPlus.prototype = { attachment: function () { let me = this; let box = $('#'+me.settings.targetBox); let boxInput = box.find('[data-type="file"]'); let attachment = me.settings.attachment; //删除附件 box.on('click', '.file-delete', function () { let id = $(this).data('id'),file_id = $(this).data('fileid'),uid = $(this).data('uid'); if (uid != login_admin && attachment.uidDelete==true) { layer.msg('你不是该文件的上传人，无权限删除'); return false; } let idsStr = boxInput.val(),idsArray = []; if (typeof idsStr !== 'undefined' && idsStr != '') { idsArray = idsStr.split(","); idsArray.remove(file_id); } tool.ask('确定删除该附件吗？', function(index) { if (typeof (attachment.ajaxDelete) === "function") { if(attachment.type==1){ //单文件，单记录删除 attachment.ajaxDelete(id,file_id); } else{ attachment.ajaxDelete(idsArray.join(',')); } } else{ //虚拟删除 boxInput.val(idsArray.join(',')); $('#uploadImg' + id).remove(); } layer.close(index); }); }) //重命名附件 box.on('click','.name-edit',function(){ let file_id = $(this).data('fileid'); let uid = $(this).data('uid'); if (uid != login_admin && me.settings.uidDelete==true) { layer.msg('你不是该文件的上传人，无权限修改'); return false; } let name = $(this).data('name'); let fileext = $(this).data('fileext'); layer.prompt({ title: '重命名', value: name.replace(/\.[^.]+$/, ""), yes: function(index, layero) { // 获取文本框输入的值 var value = layero.find(".layui-layer-input").val(); if (value!='') { let new_title = value+'.'+fileext; let callback = function (e) { layer.msg(e.msg); $('#fileItem'+file_id).find('.file-title').html(new_title).attr('title',new_title); } tool.post("/api/index/file_edit", {id:file_id,title:new_title}, callback); layer.close(index); } else { layer.msg('请填写文件名称'); } } }) }) //多附件上传 upload.render({ elem: '#'+me.settings.target, url: me.settings.url, accept: 'file', exts: attachment.exts, multiple: true, before: function(obj){ layer.msg('上传中...', {icon: 16, time: 0}); }, done: function(res){ if (res.code == 0) { //上传成功 if(attachment.type==0){ let image=['jpg','jpeg','png','gif'],office=['doc','docx','xls','xlsx','ppt','pptx']; let idsStr = boxInput.val(),idsArray = []; if (typeof idsStr !== 'undefined' && idsStr != '') { idsArray = idsStr.split(","); } idsArray.push(res.data.id); let filesize = renderSize(res.data.filesize),type=0,type_icon = 'icon-xiangmuguanli',ext = 'zip'; if(res.data.fileext == 'pdf'){ type=1; type_icon = 'icon-kejian'; ext = 'pdf'; } if (image.indexOf(res.data.fileext) !== -1) { type=1; type_icon = 'icon-sucaiguanli'; ext = 'image'; } if (office.indexOf(res.data.fileext) !== -1) { type=2; type_icon = 'icon-shenbao'; ext = 'office'; } let view_btn = ''; let temp = `
${res.data.name}
${filesize}，一分钟前
${view_btn}
`; boxInput.val(idsArray.join(',')); box.append(temp); if (typeof (attachment.ajaxSave) === "function") { attachment.ajaxSave(idsArray.join(',')); } else{ layer.msg(res.msg); } } if(attachment.type==1){ //单文件，单记录保存 if (typeof (attachment.ajaxSave) === "function") { attachment.ajaxSave(res); } } }else{ layer.msg(res.msg); } } }); }, //单图 singleImage: function () { let me = this; let single = upload.render({ elem: "#"+me.settings.target, url: me.settings.url, accept: 'images', acceptMime:'image/*', done: function (res) { me.settings.callback(res); } }); }, //多图 multiImage: function () { let me = this; let area =[[],['640px','360px'],['928px','610px']]; $(parent.$('.express-close')).addClass('parent-colse'); this.layerindex = layer.open({ 'title':me.settings.title, 'area':area[me.settings.multi.type], 'content':me.multiRender(), end: function(){ $(parent.$('.express-close')).removeClass('parent-colse'); }, 'type':1, 'success':function(){ if(me.settings.multi.type==1){ me.uploadOne(); }else{ me.uploadMore(); } } }); }, multiRender: function (){ let me = this; let template_one = '
\
\ \
\ \ \
\
\
\
\ \
\ .jpg、.jpeg、.gif、.png、.bmp\
\
\
\ \
\ 只能上传 .jpg、.jpeg、.gif、.png、.bmp 文件\
\
\
\ \
\
\ \
\ \
\ \
\
\
\ \
'; let template_more = '
\
\

点击上传图片
\
\
\
\
\
\ 注：只能上传 jpg、.jpeg、.gif、.png、.bmp 文件，单次最多上传 '+me.settings.max+' 张图片，单张图片最大不要超过10M。\ \ \ \
\
'; return me.settings.multi.type==1?template_one:template_more; }, uploadOne:function(){ let me = this; form.render(); form.on('radio(type)', function(data){ if(data.value==1){ $('#uploadType1').show(); $('#uploadType2').hide(); } else{ $('#uploadType1').hide(); $('#uploadType2').show(); } }); //选文件 let uploadOne = upload.render({ elem: '#gouguUploadBtn'+me.settings.index ,url: me.settings.url ,auto: false ,accept: 'images' ,acceptMime:'image/*' ,bindAction: '#uploadNow'+me.settings.index ,choose: function(obj){ obj.preview(function(index, file, result){ $('#gouguUploadChoosed'+me.settings.index).html('已选择：'+file.name); }); } ,before: function(obj){ $('.upload-progress').show(); element.progress('upload-progress-'+me.settings.index, '0%'); } ,progress: function(n, elem, e){ console.log(n); element.progress('upload-progress-'+me.settings.index, n + '%'); } ,done: function(res){ layer.msg(res.msg); if(res.code==0){ me.settings.callback(res.data); layer.close(me.layerindex); } } }); $('#uploadSave'+me.settings.index).on('click',function(){ let url=$('[name="img_url"]').val(); let name=$('[name="img_name"]').val(); if(url == ''){ layer.msg('请输入图片URL'); return false; } if(name == ''){ layer.msg('请输入图片名称'); return false; } let res={ filepath:url, name:name, id:0 } me.settings.callback(res); layer.close(me.layerindex); }) }, uploadMore:function(){ let me = this,file_lists=[]; console.log(file_lists); let uploadList = upload.render({ elem: '#gouguUploadBtn'+me.settings.index ,elemList: $('#gouguUploadBox'+me.settings.index) //列表元素对象 ,url: me.settings.url ,accept: 'images' ,acceptMime:'image/*' ,multiple: true ,number: me.settings.max ,auto: false ,bindAction: '#uploadNow'+me.settings.index ,choose: function(obj){ let that = this; let files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 that.elemList.removeClass('select').addClass('selected'); //读取本地文件 obj.preview(function(index, file, result){ let card = $('
\
\ '+ file.name +'\
\
'+ file.name +'
\
\
\
\
'); //单个重传 card.find('.gougu-upload-card-reload').on('click', function(){ obj.upload(index, file); }); //删除 card.find('.gougu-upload-card-del').on('click', function(){ delete files[index]; //删除对应的文件 card.remove(); uploadList.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选 }); that.elemList.append(card); element.render('progress'); //渲染新加的进度条组件 }); } ,done: function(res, index, upload){ //成功的回调 let that = this; if(res.code==0){ delete this.files[index]; //删除文件队列已经上传成功的文件 that.elemList.find('#gouguUploadCard'+ index).addClass('uploadok'); file_lists.push(res.data); } else{ layer.msg(res.msg); this.error(index, upload); } } ,allDone: function(obj){ //多文件上传完毕后的状态回调 //console.log(obj); layer.msg('上传成功'); me.settings.callback(file_lists,obj); layer.close(me.layerindex); } ,error: function(index, upload){ //错误回调 let that = this; let tr = that.elemList.find('#gouguUploadCard'+ index).addClass('reload'); //显示重传 } ,progress: function(n, elem, e, index){ element.progress('progress-card-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比 } }); $('#uploadClear'+me.settings.index).click(function(){ $('#gouguUploadBox'+me.settings.index).find('.gougu-upload-card-del').click(); }) $('#uploadOk'+me.settings.index).click(function(){ if(me.settings.files.length>0){ me.settings.callback(me.settings.files); layer.close(me.layerindex); } else{ layer.msg('请先点击开始上传按钮上传'); } }) }, //批量导入 excelImport:function(){ let me = this; $(parent.$('.express-close')).addClass('parent-colse'); layer.open({ 'title':me.settings.title, 'type':1, 'area': ['640px', '320px'], 'content':'
\
\
\ \
\
Excel模板下载\
\
\
\
\ \
\ 1、只能上传 .xls、.xlsx文件，文件大小 3MB 以内，每次导入不能超过3000条；
2、Excel表格数据请勿放在合并的单元格中，格式务必按照模版样本填写；
3、'+me.settings.import.tips+'\
\
\
\ \
\ \ \
\
\
', end: function(){ $(parent.$('.express-close')).removeClass('parent-colse'); }, success: function(layero, idx){ form.render(); let noteImport = $('#noteImport'+me.settings.index); //选文件 let uploadImport = upload.render({ elem: '#importSelect'+me.settings.index ,url: me.settings.url ,auto: false ,accept: 'file' //普通文件 ,acceptMime: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // 此处设置上传的文件格式 ,exts: 'xls|xlsx' //只允许上传文件格式 ,bindAction: '#btnImport'+me.settings.index ,choose: function(obj){ obj.preview(function(index, file, result){ $('#importSelect'+me.settings.index).html('重新选择'); $('#inputImport'+me.settings.index).val(file.name); }); } ,before: function(obj){ if($('#inputImport'+me.settings.index).val()==''){ layer.msg('请选择文件'); return false; } } ,progress: function(n, elem, e){ noteImport.html('文件上转中...'); if(n==100){ noteImport.html('数据导入中...'); } } ,error: function(index, upload){ uploadImport.reload(); $('#importSelect'+me.settings.index).html('选择文件'); $('#inputImport'+me.settings.index).val(''); noteImport.html('数据导入失败，请重新选择文件或关闭弹层重试'); } ,done: function(res, index, upload){ uploadImport.reload(); noteImport.html(res.msg); layer.msg(res.msg); if(res.code==0){ layer.close(idx); me.settings.callback(res); } else{ $('#importSelect'+me.settings.index).html('选择文件'); $('#inputImport'+me.settings.index).val(''); } } }); } }); } } //输出接口 exports('uploadPlus', uploadPlus); });