Skip to content

Commit 76f646a

Browse files
committed
feat(admin): 图片多选组件增加选择附件功能
- 添加选择附件按钮,支持从已上传的附件中选择图片 - 实现附件选择后的预览和添加到图片列表 - 优化多图上传组件,增加权限控制
1 parent 39beb63 commit 76f646a

File tree

1 file changed

+32
-5
lines changed

1 file changed

+32
-5
lines changed

src/plugin/admin/app/common/Layui.php

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -418,7 +418,6 @@ public function uploadImage($options)
418418
});
419419
layui.upload.render({
420420
elem: "#$id",$options_string
421-
url: {$props['url']},
422421
done: function (res) {
423422
if (res.code > 0) return layui.layer.msg(res.msg);
424423
this.item.prev().val(res.data.url).prev().attr("src", res.data.url);
@@ -442,9 +441,13 @@ public function uploadImage($options)
442441
</div>
443442
</blockquote>
444443
445-
<button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="multi-upload-$id">
444+
<button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="multi-upload-$id" permission="app.admin.upload.image">
446445
<i class="layui-icon layui-icon-upload"></i>多图上传
447446
</button>
447+
448+
<button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="attachment-choose-$id" permission="app.admin.upload.attachment">
449+
<i class="layui-icon layui-icon-align-left"></i>选择图片
450+
</button>
448451
</div>
449452
</div>
450453
</div>
@@ -457,10 +460,34 @@ public function uploadImage($options)
457460
var upload = layui.upload;
458461
var $ = layui.$;
459462
let multiple_images = layui.$("#$id").attr("value").split(",");
463+
464+
465+
$("#attachment-choose-$id").on("click", function() {
466+
parent.layer.open({
467+
type: 2,
468+
title: "选择附件",
469+
content: "/app/admin/upload/attachment?ext=jpg,jpeg,png,gif,bmp",
470+
area: ["95%", "90%"],
471+
success: function (layero, index) {
472+
parent.layui.$("#layui-layer" + index).data("callback", function (data) {
473+
//上传完毕
474+
$('#uploader-list-$id').append(
475+
'<div class="file-iteme">' +
476+
'<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
477+
'<img src='+ data.url +' alt="'+ data.name +'" >' +
478+
'</div>'
479+
);
480+
481+
//追加图片成功追加文件名至图片容器
482+
multiple_images.push(data.url);
483+
$('#$id').val(multiple_images);
484+
});
485+
}
486+
});
487+
});
488+
460489
upload.render({
461-
elem: '#multi-upload-$id',
462-
url: {$props['url']},
463-
multiple: true,
490+
elem: '#multi-upload-$id',$options_string
464491
before: function(obj){
465492
layer.msg('图片上传中...', {
466493
icon: 16,

0 commit comments

Comments
 (0)