caiping/public/static/assets/gougu/module/uploadplus.js

layui.define(['layer'],function(exports){
	//提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
	let layer = layui.layer,element = layui.element, form = layui.form, upload = layui.upload,uploadindex=0;
	let isObject = function(obj) {
		return Object.prototype.toString.call(obj) === '[object Object]';
	}
	const opts={
		"title":'上传图片',
		"url":'/admin/api/upload/thumb/500',
		"target":'gogoupload',
		"type":1,
		"max":31,
		"callback": null
	};
	var uploadplus = function(options){
		this.settings = $.extend({}, opts, options);
		this.settings.index = uploadindex;
		uploadindex++;
		this.createStyle();
		var me=this;
		if(isObject(me.settings.target)){
			me.init();
		}
		else{
			$('#'+me.settings.target).click(function(){
				me.init();
			});
		}
	};    
	uploadplus.prototype = {		
		init: function () {
			var me = this;
			var area =[[],['640px','360px'],['928px','610px']];
			this.layerindex = layer.open({
				'title':me.settings.title,
				'area':area[me.settings.type],
				'content':me.render(),
				'type':1,
				'success':function(){
					if(me.settings.type==1){
						me.uploadOne();	
					}else{
						me.uploadMore();	
					}							
				}
			});
		},
		render: function (){
			var me = this;
			var 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="uploadAjax'+me.settings.index+'">确定保存</span>\
								</div>\
							</div>\
						</div>\
				</div>';
			var 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.type==1?template_one:template_more;
		},
		uploadOne:function(){
			var me = this;
			form.render();					
			form.on('radio(type)', function(data){
				if(data.value==1){
					$('#uploadType1').show();
					$('#uploadType2').hide();
				}
				else{
					$('#uploadType1').hide();
					$('#uploadType2').show();
				}
			}); 					
			//选文件
			var uploadOne = upload.render({
				elem: '#gouguUploadBtn'+me.settings.index
				,url: me.settings.url
				,auto: false
				,accept: 'file' //普通文件
				,exts: 'png|jpg|gif|jpeg|bmp' //只允许上传文件格式
				,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);
					}							
				}
			});
					
			$('#uploadAjax'+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(){
			var me = this,file_lists=[];
			console.log(file_lists);
			var uploadList = upload.render({
				elem: '#gouguUploadBtn'+me.settings.index
				,elemList: $('#gouguUploadBox'+me.settings.index) //列表元素对象
				,url: me.settings.url
				,accept: 'file'
				,exts: 'png|jpg|gif|jpeg|bmp' //只允许上传文件格式
				,multiple: true
				,number: me.settings.max
				,auto: false
				,bindAction: '#uploadNow'+me.settings.index
				,choose: function(obj){
					var that = this;
					var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
					that.elemList.removeClass('select').addClass('selected');
					//读取本地文件
					obj.preview(function(index, file, result){
						var 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){ //成功的回调
					var 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){ //错误回调
				  var that = this;
				  var 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('请先点击开始上传按钮上传');
				}
			})
		},	
		createStyle:function(){
			var cssText='.gougu-upload-files{background-color: #ffffff; border:1px solid #e4e7ed;color: #c0c4cc;cursor: not-allowed; padding:0 12px; box-sizing: border-box; display: inline-block; font-size: inherit; height: 38px; line-height: 35px; margin-right:8px; border-radius:2px;}\
			.gougu-upload-box{background-color:#f8f8f8; border:1px solid #eee; border-radius:6px; width:888px; height:440px; padding:5px; overflow-y:auto; margin:0 auto; position:relative;-webkit-user-select:none;-moz-user-select:none-ms-user-select:none;}\
			.select .gougu-upload-btn{width:100%; height:100%; position:absolute;top:0;left:0; line-height:440px;}\
			.select .gougu-upload-btn-box{width:100%; height:100%; box-sizing: border-box; padding-top:160px; line-height:1.2;text-align:center; cursor:pointer; color:#49bc85;font-size:22px;}\
			.select .gougu-upload-btn-box i{font-size:60px;}\
			.selected .gougu-upload-btn{width:100px; height:100px; float:left; padding:5px;}\
			.selected .gougu-upload-btn-box{width:100px; height:100px; box-sizing: border-box; background-color:#eaf7f0; border:1px solid #49bc85; padding-top:16px; line-height:1.2;font-size:14px; text-align:center; cursor:pointer; color:#49bc85}\
			.selected .gougu-upload-btn-box i{font-size:36px;}\
			.gougu-upload-card{width:100px; height:100px; float:left; padding:5px;}\
			.gougu-upload-card-box{width:100px; height:100px; box-sizing: border-box; background-color:#fff; border:1px solid #eee;position: relative;overflow: hidden;}\
			.gougu-upload-card-box img {width: 100px; height: 100px; object-fit: cover;}\
			.gougu-upload-card-text{background-color:rgba(0,0,0,.618); color:#fff; position:absolute;left:0; bottom:0; line-height:1.6; font-size:12px; width:100px; text-overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}\
			.gougu-upload-card-reload{width:50px; height:32px; position:absolute; top:5px; left:3px; font-size:12px;display:none;}\
			.gougu-upload-card-del{width:32px; height:32px; position:absolute; top:5px; right:0; display:none;}\
			.gougu-upload-card:hover .gougu-upload-card-del{display:block;}\
			.uploadok.gougu-upload-card .gougu-upload-card-del{display:none;}\
			.reload.gougu-upload-card .gougu-upload-card-reload{display:block;}\
			.gougu-upload-card-bar{width:100%; position:absolute;left:0; bottom:16px;}\
			.gougu-upload-tips{color:#969696; font-size:12px; margin-right:20px;}';
			
			var document = window.document;
			var styleTag = document.createElement("style");
			styleTag.setAttribute("type", "text/css");
			if (styleTag.styleSheet) {    //ie
				styleTag.styleSheet.cssText += cssText;
			}
			else{			
				styleTag.innerHTML = cssText;
			}        
			document.getElementsByTagName("head").item(0).appendChild(styleTag);
		}
	}

  //输出接口
  exports('uploadplus', uploadplus);
});