Update image.html

app/admin/view/api/upload.js

@@ -188,7 +188,7 @@ define(['md5', 'notify'], function (SparkMD5, Notify, allowMime) {
             $(this.option.elem.data('input')).val(file.xurl).trigger('change', file);
         }
         // 文件上传成功事件
-        this.event('upload.done', {file: file, data: ret}, file, message);
+        this.event('push', file.xurl).event('upload.done', {file: file, data: ret}, file, message);
         /*! 所有文件上传完成后结果处理 */
         if (this.count.success + this.count.error >= this.count.total) {
             this.option.hide || $.msg.close(this.loader);
@@ -196,7 +196,7 @@ define(['md5', 'notify'], function (SparkMD5, Notify, allowMime) {
                 var urls = this.option.elem.data('input').value || [];
                 if (typeof urls === 'string') urls = urls.split('|');
                 for (var i in this.files) urls.push(this.files[i].xurl);
-                $(this.option.elem.data('input')).val(urls.join('|')).trigger('change', files);
+                $(this.option.elem.data('input')).val(urls.join('|')).trigger('change', this.files);
             }
             this.event('upload.complete', {file: this.files}, file).init().uploader && this.uploader.reload();
         }

app/admin/view/api/upload/image.html

@@ -5,77 +5,21 @@
             <a class="layui-btn layui-btn-sm layui-btn-normal" @click="search">搜 索</a>
         </div>
         <div class="pull-right">
-            <a class="layui-btn layui-btn-sm" @click="uploadImage">上传图片</a>
+            <a class="layui-btn layui-btn-sm layui-btn-normal" @click="uploadImage">上传图片</a>
         </div>
     </div>
     <div class="image-dialog-body">
-        <div class="image-dialog-item" v-for="x in list" v-if="show">
-            <div class="uploadimage" :style="x.style" @click="setValue(x.xurl)"></div>
+        <div class="image-dialog-item" v-for="x in list" @click="setItem(x)" style="display:none" v-show="show" :class="{'image-dialog-checked':x.checked}">
+            <div class="uploadimage" :style="x.style"></div>
             <p class="image-dialog-item-name layui-elip" v-text="x.name"></p>
         </div>
     </div>
     <div class="image-dialog-foot">
         <div id="ImageDialogPage" class="image-dialog-page"></div>
+        <div id="ImageDialogButton" class="image-dialog-button" v-if="data.length>0" @click="confirm">{{data.length}}</div>
     </div>
 </div>
 
-<style>
-    .image-dialog-head {
-        clear: both;
-        height: 30px;
-        padding: 10px 12px;
-    }
-
-    .image-dialog-body {
-        height: 470px;
-        background: #efefef;
-        padding-top: 12px;
-        padding-left: 12px;
-        display: flex;
-        flex-wrap: wrap;
-        align-content: flex-start;
-    }
-
-    .image-dialog-item {
-        position: relative;
-        margin-right: 12px;
-        margin-bottom: 12px;
-    }
-
-    .image-dialog-item-name {
-        left: 0;
-        right: 0;
-        bottom: 0;
-        color: #fff;
-        padding: 3px 10px;
-        position: absolute;
-        text-align: center;
-        line-height: 1.5em;
-        white-space: nowrap;
-        background: rgba(0, 0, 0, 0.6);
-    }
-
-    .image-dialog-item .uploadimage {
-        margin: 0;
-        width: 145px;
-        height: 145px;
-    }
-
-    .image-dialog-foot {
-        padding: 0 12px;
-    }
-
-    .image-dialog-page {
-        height: 50px;
-        text-align: center;
-    }
-
-    .image-dialog-page .layui-laypage a,
-    .image-dialog-page .layui-laypage span {
-        margin-bottom: 0;
-    }
-</style>
-
 <script>
     require(['vue'], function (vue) {
         var app = new vue({
@@ -84,11 +28,16 @@
                 page: 1,
                 limit: 15,
                 show: false,
+                mult: false,
                 keys: '',
                 list: [],
+                data: [],
+                idxs: {},
             },
             created: function () {
                 this.$btn = $('#{$get.id|default=""}');
+                this.$ups = $('#ImageDialogUploadLayout [data-file]');
+                this.mult = "{$get.file|default='image'}" === 'images';
                 this.loadPage();
             },
             methods: {
@@ -97,55 +46,74 @@
                     this.page = 1;
                     this.loadPage();
                 },
+                // 设置单项数据
+                setItem: function (item) {
+                    if (!this.mult) return this.setValue(item.xurl);
+                    if ((item.checked = !this.idxs[item.id])) {
+                        (this.idxs[item.id] = item) && this.data.push(item);
+                    } else {
+                        delete this.idxs[item.id];
+                        layui.each(this.data, function (idx, _ite) {
+                            _ite.id === item.id && app.data.splice(idx, 1);
+                        });
+                    }
+                },
+                // 更新列表数据
+                setList: function (items, count) {
+                    this.list = items;
+                    this.list.forEach(function (item) {
+                        item.checked = !!app.idxs[item.id]
+                        item.style = 'background-image:url(' + item.xurl + ')';
+                    });
+                    this.addPage(count);
+                },
+                // 确认选择数据
+                confirm: function () {
+                    layui.each(this.data, function (idx, file) {
+                        app.setValue(file.xurl);
+                    });
+                },
                 // 设置选择数据
                 setValue: function (url) {
-                    this.$btn.trigger('choose', url);
+                    this.$btn.triggerHandler('push', url);
                     if (this.$btn.data('input')) $(this.$btn.data('input')).val(url).trigger('change', url);
                     $('#ImageDialog').parents('.layui-layer-content').next().find('.layui-layer-close').trigger('click');
                 },
                 // 创建分页工具条
                 addPage: function (count) {
-                    var that = this;
                     this.show = true;
                     layui.laypage.render({
-                        curr: this.page, count: count, limit: that.limit,
+                        curr: this.page, count: count, limit: app.limit,
                         layout: ['count', 'prev', 'page', 'next', 'refresh'],
                         elem: 'ImageDialogPage', jump: function (obj, first) {
-                            if (!first) that.loadPage(that.page = obj.curr);
+                            if (!first) app.loadPage(app.page = obj.curr);
                         },
                     });
                 },
                 // 加载页面数据
                 loadPage: function () {
-                    var that = this;
                     this.params = {page: this.page, limit: this.limit, output: 'layui.table', name: this.keys || ''};
                     $.form.load('{:url("image")}', this.params, 'get', function (ret) {
-                        that.list = ret.data;
-                        that.list.forEach(function (item) {
-                            item.style = 'background-image:url(' + item.xurl + ')';
-                        });
-                        that.addPage(ret.count);
-                        return false;
+                        return app.setList(ret.data, ret.count), false;
                     });
                 },
                 // 上传图片文件
                 uploadImage: function () {
-                    $('[data-field="image-dialog-upload-input"]').click();
-                    $('[name="image-dialog-upload-input"]').one('change', function (e) {
-                        app.setValue(e.currentTarget.value);
-                        // e.currentTarget.value 取上传后的值
-                        // app.page = 1;
-                        // app.loadPage();
-                    });
+                    this.$ups.off('push').on('push', function (e, xurl) {
+                        app.setValue(xurl);
+                    }).click();
                 },
             }
         });
     });
 </script>
 
-<label class="layui-hide">
+<label class="layui-hide" id="ImageDialogUploadLayout">
     <!-- 图片上传组件 开始 -->
-    <input class="layui-input" name="image-dialog-upload-input">
-    <button class="layui-btn" data-file data-type="png,jpg,jpeg,gif" data-field="image-dialog-upload-input"></button>
+    {if isset($get.file) && $get.file eq 'image'}
+    <button class="layui-btn" data-file data-type="png,jpg,jpeg,gif"></button>
+    {else}
+    <button class="layui-btn" data-file="mul" data-type="png,jpg,jpeg,gif"></button>
+    {/if}
     <!-- 图片上传组件 结束 -->
 </label>

public/static/admin.js

@@ -564,7 +564,7 @@ $(function () {
         return data;
     };
 
-    /*! 全局文件上传插件 */
+    /*! 全局文件上传 */
     $.fn.uploadFile = function (callable, initialize) {
         return this.each(function () {
             if ($(this).data('inited')) return false;
@@ -579,7 +579,7 @@ $(function () {
     $.fn.uploadOneVideo = function () {
         return this.each(function () {
             if ($(this).data('inited')) return true; else $(this).data('inited', true);
-            var $in = $(this), $bt = $('<a data-file class="uploadimage uploadvideo transition"><span class="layui-icon">&#x1006;</span><span class="layui-icon">&#xe615;</span></a>').data('input', this);
+            var $in = $(this), $bt = $('<a data-file class="uploadimage uploadvideo"><span class="layui-icon">&#x1006;</span><span class="layui-icon">&#xe615;</span></a>').data('input', this);
             $bt.attr('data-size', $in.data('size') || 0).attr('data-type', $in.data('type') || 'mp4').find('span').on('click', function (event) {
                 event.stopPropagation();
                 if ($(this).index() === 0) $bt.attr('style', ''), $in.val(''); else $in.val() && $.previewImage(encodeURI($in.val()));
@@ -593,13 +593,15 @@ $(function () {
     $.fn.uploadOneImage = function () {
         return this.each(function () {
             if ($(this).data('inited')) return true; else $(this).data('inited', true);
-            var $in = $(this), $bt = $('<a data-file="image" class="uploadimage transition"><span class="layui-icon">&#x1006;</span><span class="layui-icon">&#xe615;</span></a>').data('input', this);
-            $bt.attr('data-size', $in.data('size') || 0).attr('data-type', $in.data('type') || 'png,jpg,gif,jpeg').find('span').on('click', function (event) {
-                event.stopPropagation();
-                if ($(this).index() === 0) $bt.attr('style', ''), $in.val(''); else $in.val() && $.previewImage(encodeURI($in.val()));
-            }), $in.on('change', function () {
+            var $bt = $('<div class="uploadimage"><span><a data-file class="layui-icon layui-icon-upload-drag"></a><i class="layui-icon layui-icon-search"></i><i class="layui-icon layui-icon-close"></i></span><span data-file="image"></span></div>');
+            var $in = $(this).on('change', function () {
                 if (this.value) $bt.css('backgroundImage', 'url(' + encodeURI(this.value) + ')');
             }).after($bt).trigger('change');
+            $bt.on('click', 'i.layui-icon-search', function (event) {
+                event.stopPropagation(), $in.val() && $.previewImage(encodeURI($in.val()));
+            }).on('click', 'i.layui-icon-close', function (event) {
+                event.stopPropagation(), $bt.attr('style', ''), $in.val('');
+            }).find('[data-file]').data('input', this).attr('data-size', $in.data('size') || 0).attr('data-type', $in.data('type') || 'png,jpg,gif,jpeg');
         });
     };
 
@@ -607,21 +609,24 @@ $(function () {
     $.fn.uploadMultipleImage = function () {
         return this.each(function () {
             if ($(this).data('inited')) return true; else $(this).data('inited', true);
-            var $in = $(this), $bt = $('<a data-file="mul" class="uploadimage"></a>'), imgs = this.value ? this.value.split('|') : []
-            $in.after($bt.attr('data-size', $in.data('size') || 0).attr('data-type', $in.data('type') || 'gif,png,jpg,jpeg').uploadFile(function (src) {
-                imgs.push(src), $in.val(imgs.join('|')), showImageContainer([src]);
-            })), (imgs.length > 0 && showImageContainer(imgs));
+            var $bt = $('<div class="uploadimage"><span><a data-file="mul" class="layui-icon layui-icon-upload-drag"></a></span><span data-file="images"></span></div>');
+            var ims = this.value ? this.value.split('|') : [], $in = $(this).after($bt);
+            $bt.find('[data-file]').attr('data-size', $in.data('size') || 0).attr('data-type', $in.data('type') || 'gif,png,jpg,jpeg').data('input', this).on('push', function (evt, src) {
+                ims.push(src), $in.val(ims.join('|')), showImageContainer([src]);
+            }) && (ims.length > 0 && showImageContainer(ims))
 
             function showImageContainer(srcs) {
                 $(srcs).each(function (idx, src, $image) {
-                    $image = $('<div class="uploadimage uploadimagemtl transition"><div><a class="layui-icon">&#xe603;</a><a class="layui-icon">&#x1006;</a><a class="layui-icon">&#xe602;</a></div></div>');
+                    $image = $('<div class="uploadimage uploadimagemtl"><div><a class="layui-icon">&#xe603;</a><a class="layui-icon">&#x1006;</a><a class="layui-icon">&#xe602;</a></div></div>');
                     $image.attr('data-tips-image', encodeURI(src)).css('backgroundImage', 'url(' + encodeURI(src) + ')').on('click', 'a', function (event, index, prevs, $item) {
                         event.stopPropagation(), $item = $(this).parent().parent(), index = $(this).index();
-                        if (index === 2 && $item.index() !== $bt.prevAll('div.uploadimage').length) $item.next().after($item); else if (index === 0 && $item.index() > 1) $item.prev().before($item); else if (index === 1) $item.remove();
-                        imgs = [], $bt.prevAll('.uploadimage').map(function () {
-                            imgs.push($(this).attr('data-tips-image'));
+                        if (index === 2 && $item.index() !== $bt.prevAll('div.uploadimage').length) $item.next().after($item);
+                        else if (index === 0 && $item.index() > 1) $item.prev().before($item);
+                        else if (index === 1) $item.remove();
+                        ims = [], $bt.prevAll('.uploadimage').map(function () {
+                            ims.push($(this).attr('data-tips-image'));
                         });
-                        imgs.reverse(), $in.val(imgs.join('|'));
+                        ims.reverse(), $in.val(ims.join('|'));
                     }), $bt.before($image);
                 });
             }

public/static/plugs/ckeditor4/config.js

@@ -25,7 +25,7 @@ CKEDITOR.plugins.add("uimage", {
         editor.ui.addButton("UploadImage", {label: "上传本地图片", command: 'uimage', icon: 'image', toolbar: 'insert,10'});
         setTimeout(function () {
             $('#cke_' + editor.name).find('.cke_button__uploadimage_label').parent().map(function () {
-                $(this).attr('data-type', 'png,jpg,gif,jpeg').attr('data-file', 'mul').uploadFile(function (url) {
+                $(this).attr('data-type', 'png,jpg,gif,jpeg').attr('data-file', 'images').on('push', function (e, url) {
                     editor.insertElement(CKEDITOR.dom.element.createFromHtml('<div><img style="border:0;max-width:100%;" alt="" src="' + url + '"></div>'));
                 });
             });

public/static/theme/css/_custom.less

@@ -797,6 +797,7 @@ input:not(.layui-hide,[type=hidden]) {
   display: inline-block;
   border-radius: 3px;
   #imageBgCover();
+  #defaTransition();
   background-image: url('../img/upimg.png');
   box-shadow: @ShadowOuterMin;
 
@@ -804,32 +805,46 @@ input:not(.layui-hide,[type=hidden]) {
     background-image: url('../img/upvideo.png');
   }
 
-  span.layui-icon {
-    color: #fff;
-    width: 20px;
+  > span:first-child {
+    right: 0;
     height: 20px;
+    z-index: 3;
     display: none;
     position: absolute;
-    text-align: center;
-    line-height: 22px;
     box-shadow: @ShadowOuterMin;
-    background: rgba(0, 0, 0, .8);
+
+    .layui-icon {
+      color: #fff;
+      width: 22px;
+      height: 20px;
+      text-align: center;
+      line-height: 22px;
+      display: inline-block;
+      background: rgba(0, 0, 0, .8);
+    }
+
+    .layui-icon:first-child {
+      border-top-left-radius: 3px;
+      border-bottom-left-radius: 3px;
+    }
+
+    .layui-icon:last-child {
+      border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
   }
 
-  span.layui-icon:first-child {
-    right: 0;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
+
+  > span:last-child {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: absolute;
+    z-index: 2;
   }
 
-  span.layui-icon:last-child {
-    right: 21px;
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-
-  &:hover span.layui-icon {
-    display: inline-block;
+  &:hover > span:first-child {
+    display: block;
   }
 }
 
@@ -844,10 +859,9 @@ input:not(.layui-hide,[type=hidden]) {
 
     a {
       color: #EEE;
-      width: 20px;
+      width: 22px;
       height: 20px;
       display: inline-block;
-      margin-left: 1px;
       box-shadow: @ShadowOuterMin;
       text-align: center;
       line-height: 20px;
@@ -932,6 +946,117 @@ input:not(.layui-hide,[type=hidden]) {
   }
 }
 
+/* 图片选择器样式 */
+.image-dialog {
+  &-head {
+    clear: both;
+    height: 30px;
+    padding: 10px 12px;
+  }
+
+  &-body {
+    height: 470px;
+    display: flex;
+    flex-wrap: wrap;
+    background: #EFEFEF;
+    padding-top: 12px;
+    padding-left: 12px;
+    align-content: flex-start;
+  }
+
+  &-item {
+    z-index: 1;
+    overflow: hidden;
+    position: relative;
+    margin-right: 12px;
+    margin-bottom: 12px;
+    border-radius: @BoxBorderRadius;
+
+    .uploadimage {
+      margin: 0;
+      width: 145px;
+      height: 145px;
+    }
+
+    &-name {
+      left: 0;
+      right: 0;
+      bottom: 0;
+      color: #fff;
+      padding: 3px 10px;
+      position: absolute;
+      text-align: center;
+      line-height: 1.5em;
+      white-space: nowrap;
+      background: rgba(0, 0, 0, 0.6);
+    }
+  }
+
+  &-foot {
+    padding: 0 12px;
+  }
+
+  &-page {
+    height: 50px;
+    text-align: center;
+
+    .layui-laypage {
+      a, span {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &-button {
+    color: #fff;
+    right: 10px;
+    bottom: 4px;
+    width: 42px;
+    height: 42px;
+    z-index: 2;
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+    text-align: center;
+    background: #1E9FFF;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 42px;
+    border-radius: 50%;
+    #NotSelect();
+    #defaTransition();
+  }
+
+  &-checked {
+    &:after, &:before {
+      z-index: 2;
+      cursor: pointer;
+      content: '';
+      display: block;
+      position: absolute;
+    }
+
+    &:after {
+      top: -25px;
+      right: -25px;
+      width: 50px;
+      height: 50px;
+      transform: rotate(135deg);
+      -moz-transform: rotate(135deg);
+      -webkit-transform: rotate(135deg);
+      background-color: rgba(56, 169, 225, 0.8);
+    }
+
+    &:before {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: 4px solid rgba(56, 169, 225, 0.8);
+    }
+  }
+}
+
 .portal-block-container {
   font-size: 14px;
   margin-bottom: 10px;