oa/public/static/assets/gougu/module/uploadPlus.js

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 isObject(obj) {
		return Object.prototype.toString.call(obj) === '[object Object]';
	}
	//名称是否合法
	function isValidFileName(fileName) {
		const illegalChars = /[\\\/\*\:"<>|\?]/;
		return !illegalChars.test(fileName);
	}
	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(','));
						$('#uploadFile' + 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!='') {
							if(isValidFileName(value)==false){
								layer.msg('文件名不能包含下列任何字符：\/:*?".<>|');
								return false;
							}
							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 = tool.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 = '<span class="file-ctrl blue" data-ctrl="edit" data-type="'+type+'" data-fileid="'+res.data.id+'" data-ext="'+ext+'" data-filename="'+res.data.name+'" data-href="'+res.data.filepath+'" data-id="'+res.data.id+'" data-uid="'+res.data.uid+'" title="附件操作"><i class="iconfont icon-gengduo1"></i></span>';
							
							let temp = `<div class="layui-col-md${attachment.colmd}" id="uploadFile${res.data.id}">
									<div class="file-card" id="fileItem${res.data.id}">
										<i class="file-icon iconfont ${type_icon}"></i>
										<div class="file-info">
											<div class="file-title" title="${res.data.name}">${res.data.name}</div>
											<div class="file-ops">${filesize}，一分钟前</div>
										</div>
										<div class="file-tool">${view_btn}<span class="name-edit green" style="display:none;" data-id="${res.data.id}" data-fileid="${res.data.id}" id="fileEdit${res.data.id}" data-name="${res.data.name}" data-fileext="${res.data.fileext}" title="重命名"></span><span class="file-delete red" style="display:none;" data-id="${res.data.id}" data-fileid="${res.data.id}" id="fileDel${res.data.id}" title="删除"><i class="iconfont icon-shanchu"></i></span></div>
									</div>
								</div>`;
							boxInput.val(idsArray.join(','));			
							if (typeof (attachment.ajaxSave) === "function") {
								attachment.ajaxSave(idsArray.join(','));
							}
							else{
								box.append(temp);	
								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 = '<div class="layui-form p-3">\
						<div class="layui-form-item">\
							<label class="layui-form-label">来源：</label>\
							<div class="layui-input-block">\
								<input type="radio" name="uploadtype" lay-filter="type" value="1" title="本地上传" checked>\
								<input type="radio" name="uploadtype" lay-filter="type" value="2" title="网络图片">\
							</div>\
						</div>\
						<div id="uploadType1">\
							<div class="layui-form-item">\
								<label class="layui-form-label">文件：</label>\
								<div class="layui-input-block">\
									<span class="gougu-upload-files">.jpg、.jpeg、.gif、.png、.bmp</span><button type="button" class="layui-btn layui-btn-normal" id="gouguUploadBtn'+me.settings.index+'">选择文件</button>\
								</div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block">\
									<span class="gougu-upload-tips">只能上传 .jpg、.jpeg、.gif、.png、.bmp 文件</span>\
								</div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block" id="gouguUploadChoosed'+me.settings.index+'"></div>\
							</div>\
							<div class="layui-progress upload-progress" lay-showpercent="yes" lay-filter="upload-progress-'+me.settings.index+'" style="margin-bottom:12px; margin-left:100px; width:320px; display:none;">\
							  <div class="layui-progress-bar layui-bg-blue" lay-percent=""><span class="layui-progress-text"></span></div>\
							</div>\
							<div class="layui-form-item layui-form-item-sm">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block">\
									<button type="button" class="layui-btn" id="uploadNow'+me.settings.index+'">开始上传</button>\
								</div>\
							</div>\
						</div>\
						<div id="uploadType2" style="display:none; width:480px;">\
							<div class="layui-form-item">\
								<label class="layui-form-label">URL地址：</label>\
								<div class="layui-input-block">\
									<input type="text" name="img_url" placeholder="" autocomplete="off" class="layui-input">\
								</div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label">图片名称：</label>\
								<div class="layui-input-block">\
									<input type="text" name="img_name" placeholder="" autocomplete="off" class="layui-input">\
								</div>\
							</div>\
							<div class="layui-form-item layui-form-item-sm">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block">\
									<span class="layui-btn" id="uploadSave'+me.settings.index+'">确定保存</span>\
								</div>\
							</div>\
						</div>\
				</div>';
			let template_more = '<div class="layui-form p-3">\
							<div id="gouguUploadBox'+me.settings.index+'" class="gougu-upload-box select">\
								<div id="gouguUploadBtn'+me.settings.index+'" class="gougu-upload-btn"><div class="gougu-upload-btn-box"><i class="layui-icon layui-icon-addition"></i><br/>点击上传图片</div></div>\
							</div>\
							<div class="layui-progress upload-progress" lay-showpercent="yes" lay-filter="progress-'+me.settings.index+'" style="margin:12px 0; width:900px;">\
								<div class="layui-progress-bar layui-bg-blue" lay-percent=""><span class="layui-progress-text"></span></div>\
							</div>\
							<div class="layui-form-item layui-form-item-sm">\
								<span class="gougu-upload-tips">注：只能上传 jpg、.jpeg、.gif、.png、.bmp 文件，单次最多上传 '+me.settings.max+' 张图片，单张图片最大不要超过10M。</span>\
								<button type="button" class="layui-btn" id="uploadNow'+me.settings.index+'">开始上传</button>\
								<button type="button" class="layui-btn layui-btn-primary" id="uploadClear'+me.settings.index+'">清空列表</button>\
								<button type="button" class="layui-btn layui-btn-normal" id="uploadOk'+me.settings.index+'">提交</button>\
							</div>\
						</div>';
			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 = $('<div class="gougu-upload-card" id="gouguUploadCard'+index+'">\
												<div class="gougu-upload-card-box">\
													<img alt="'+ file.name +'" class="gougu-upload-card-img" src="'+ result +'">\
													<div class="gougu-upload-card-bar"><div class="layui-progress" lay-filter="progress-card-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></div>\
													<div class="gougu-upload-card-text">'+ file.name +'</div>\
													<div class="gougu-upload-card-reload"><button type="button" class="layui-btn layui-btn-xs">重新上传</button></div>\
													<div class="gougu-upload-card-del" data-index="'+index+'"><button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger"><i class="layui-icon layui-icon-close"></i></button></div>\
												</div>\
											</div>');					
						//单个重传
						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':'<div class="layui-form layui-import">\
								<div class="mt-4">\
									<div class="layui-form-item">\
										<label class="layui-form-label">选择文件：</label>\
										<div class="layui-input-block">\
											<div class="layui-input-inline" style="width:286px;"><input type="text" id="inputImport'+me.settings.index+'" placeholder=".xls,.xlsx" class="layui-input" readonly></div><button type="button" class="layui-btn layui-btn-normal" id="importSelect'+me.settings.index+'">选择文件</button><a href="'+me.settings.import.template+'" target="_blank" class="layui-btn ml-2">Excel模板下载</a>\
										</div>\
									</div>\
								</div>\
								<div class="layui-form-item py-2">\
									<label class="layui-form-label"></label>\
									<div class="layui-input-block gougu-import-tips">\
										1、只能上传 .xls、.xlsx文件，文件大小 3MB 以内，每次导入不能超过3000条；<br>2、Excel表格数据请勿放在合并的单元格中，格式务必按照模版样本填写；<br>3、'+me.settings.import.tips+'\
									</div>\
								</div>\
								<div class="layui-form-item">\
									<label class="layui-form-label"></label>\
									<div class="layui-input-block">\
										<button type="button" class="layui-btn layui-bg-red" id="btnImport'+me.settings.index+'">上传并导入</button>\
										<span class="red ml-3" id="noteImport'+me.settings.index+'"></span>\
									</div>\
								</div>\
						</div>',
				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);
});