diff --git a/public/static/assets/gougu/css/gougu.css b/public/static/assets/gougu/css/gougu.css index 8a4188f..1e7a2dd 100644 --- a/public/static/assets/gougu/css/gougu.css +++ b/public/static/assets/gougu/css/gougu.css @@ -254,8 +254,7 @@ div.layui-table-main::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0 } /*gg-DIY*/ -.gg-form-bar{padding:12px 12px 0; background-color:#fff;} -.gg-form-bar .layui-input-inline{margin-bottom:12px;} +.gg-form-bar{padding:12px; background-color:#fff;} .gg-tab-bar{background-color:#fff;} .gg-tab{text-align: left!important;} .gg-tab-title{position: relative;left: 0; height: 40px; white-space: nowrap; font-size: 0;} diff --git a/public/static/assets/gougu/module/uploadPlus.js b/public/static/assets/gougu/module/uploadPlus.js new file mode 100644 index 0000000..d89fa64 --- /dev/null +++ b/public/static/assets/gougu/module/uploadPlus.js @@ -0,0 +1,305 @@ +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 = '
\ +
\ + \ +
\ + \ + \ +
\ +
\ +
\ +
\ + \ +
\ + .jpg、.jpeg、.gif、.png、.bmp\ +
\ +
\ +
\ + \ +
\ + 只能上传 .jpg、.jpeg、.gif、.png、.bmp 文件\ +
\ +
\ +
\ + \ +
\ +
\ + \ +
\ + \ +
\ + \ +
\ +
\ +
\ + \ +
'; + var template_more = '
\ +
\ +

点击上传图片
\ +
\ +
\ +
\ +
\ +
\ + 注：只能上传 jpg、.jpeg、.gif、.png、.bmp 文件，单次最多上传 '+me.settings.max+' 张图片，单张图片最大不要超过10M。\ + \ + \ + \ +
\ +
'; + 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 = $('
\ +
\ + '+ 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){ //成功的回调 + 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); +}); \ No newline at end of file