html代码
html
<style>
.faupload-preview-sm {
margin: 0;
padding: 0;
}
.faupload-preview-sm > li {
position: relative;
width: 35px;
height: 35px;
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #e5e5e5;
border-radius: 4px;
overflow: hidden;
background: #f5f5f5;
}
.faupload-preview-sm > li img,
.faupload-preview-sm > li .thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.faupload-preview-sm > li .btn-trash {
position: absolute;
top: 0px;
right: 0px;
z-index: 2;
}
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('多图上传')}:</label>
<div class="col-xs-12 col-sm-8">
<table class="table table-striped fieldlist" data-template="eventtpl" data-name="row[event]" id="second-table">
<tr>
<td width="100">{:__('名称')}</td>
<td>{:__('图片')}</td>
<td width="100">
<a href="javascript:;" class="btn btn-sm btn-success btn-append">
<i class="fa fa-plus"></i> {:__('Append')}
</a>
</td>
</tr>
</table>
<!-- 已隐藏，真正提交数据的隐藏域 -->
<textarea name="row[event]" class="form-control hide" cols="30" rows="5" ></textarea>
<script id="eventtpl" type="text/html">
<tr class="form-inline">
<td>
<input type="text" name="<%=name%>[<%=index%>][name]" class="form-control"
value="<%=row.name?Fast.escapeHtml(row.name):''%>" placeholder="名称"/>
</td>
<td>
<div>
<div class="input-group" style="display:flex; align-items:center; gap:8px; width:auto;">
<input type="hidden" name="<%=name%>[<%=index%>][images]" id="c-images-<%=index%>"
value="<%=row.images?row.images:''%>">
<!-- 图片预览：放在按钮前面 -->
<ul class="list-inline faupload-preview faupload-preview-sm"
id="p-images-<%=index%>"
style="margin:0; padding:0; display:flex; align-items:center; flex-wrap:wrap; gap:4px;"></ul>
<!-- 上传按钮 -->
<div class="input-group-addon no-border no-padding" style="flex-shrink:0;">
<span>
<button type="button" id="faupload-images-<%=index%>" class="btn btn-danger faupload" data-input-id="c-images-<%=index%>" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="true" data-preview-id="p-images-<%=index%>">
<i class="fa fa-upload"></i>
</button>
</span>
</div>
<span class="msg-box n-right" for="c-images-<%=index%>"></span>
</div>
</div>
</td>
<td>
<span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
<span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
</td>
</tr>
</script>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('Highlights')}:</label>
<div class="col-xs-12 col-sm-8">
<table class="table table-striped fieldlist" data-name="row[highlights]" data-template="row[highlights]tpl">
<thead>
<tr>
<th width="180">{:__('highlights icon')}</th>
<th width="200">{:__('highlights title')}</th>
<th>{:__('highlights description')}</th>
<th width="90">{:__('Operate')}</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<a href="javascript:;" class="btn btn-sm btn-success btn-append">
<i class="fa fa-plus"></i>{:__('Append')}
</a>
<textarea name="row[highlights]" class="form-control hide" cols="30" rows="5"></textarea>
</td>
</tr>
</tbody>
</table>
<script type="text/html" id="row[highlights]tpl">
<tr class="form-inline">
<!-- Icon -->
<td>
<div style="width:220px; display:flex; align-items:center; gap:10px;">
<!-- 图片地址 -->
<input type="hidden" name="<%=name%>[<%=index%>][icon]" id="c-highlights-icon-<%=index%>" value="<%=row.icon ? row.icon : ''%>">
<!-- 图片预览（放在按钮前面，同一行） -->
<ul class="list-inline faupload-preview faupload-preview-sm"
id="p-highlights-icon-<%=index%>"
style="margin:0; padding:0; display:flex; align-items:center;">
<% if (row.icon) { %>
<li style="position:relative; list-style:none;">
<a href="<%=row.icon%>" data-url="<%=row.icon%>" target="_blank">
<img src="<%=row.icon%>" style="max-width:50px;max-height:50px;display:block;">
</a>
<a href="javascript:;" class="btn btn-danger btn-xs btn-remove" style="position:absolute; top:-8px; right:-8px; padding:0 4px;">
<i class="fa fa-times"></i>
</a>
</li>
<% } %>
</ul>
<!-- 上传按钮 -->
<div class="input-group" style="width:auto;">
<div class="input-group-addon no-border no-padding">
<span>
<button type="button" id="faupload-highlights-icon-<%=index%>" class="btn btn-danger faupload" data-input-id="c-highlights-icon-<%=index%>" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-highlights-icon-<%=index%>">
<i class="fa fa-upload"></i>上传
</button>
</span>
</div>
</div>
<span class="msg-box n-right" for="c-highlights-icon-<%=index%>"></span>
</div>
</td>
<!-- 标题 -->
<td>
<input type="text" name="<%=name%>[<%=index%>][title]" class="form-control" value="<%=row.title ? Fast.escapeHtml(row.title) : ''%>" placeholder="请输入标题">
</td>
<!-- 描述 -->
<td>
<input type="text" name="<%=name%>[<%=index%>][description]" class="form-control" value="<%=row.description ? Fast.escapeHtml(row.description) : ''%>" placeholder="请输入描述">
</td>
<!-- 操作 -->
<td width="90">
<span class="btn btn-sm btn-danger btn-remove" title="删除">
<i class="fa fa-times"></i>
</span>
<span class="btn btn-sm btn-primary btn-dragsort" title="排序">
<i class="fa fa-arrows"></i>
</span>
</td>
</tr>
</script>
</div>
</div>
</form>对应js中add方法代码
javascript
add: function () {
// 删除字段后触发 change，保证 textarea 同步
$(document).on("click", ".btn-trash, .btn-remove", function () {
$('textarea, input').trigger("change");
});
// =========================
// 元素事件 event
// =========================
$(document).on(
"fa.event.appendfieldlist",
"#second-table .btn-append",
function (e, obj) {
// 初始化新增行中的上传组件
Form.events.faupload(obj);
// 初始化 SelectPage 等组件
Form.events.faselect(obj);
}
);
// =========================
// Highlights
// =========================
$(document).on(
"fa.event.appendfieldlist",
".fieldlist[data-name='row[highlights]'] .btn-append",
function (e, obj) {
// 初始化新增行中的图片上传
Form.events.faupload(obj);
// 初始化选择组件
Form.events.faselect(obj);
}
);
// FastAdmin 默认事件
Controller.api.bindevent();
},效果
