123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305 |
- 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);
- });
|