$("#file").fileinput({
showUpload:false,
overwriteInitial:false,
maxFileCount:5,
initialPreview: [
"<img src='/profile/avatar/2019/08/29/d21d8a43f67ba3d7c07be23263e1b581.jpg'
class='file-preview-image kv-preview-data'
style='width:auto;height:auto;max-width:100%;max-height:100%;'>",
"<img src='/profile/avatar/2019/08/29/a2e0318c7bdc2b1cb02845bb0d43912d.jpg'
class='file-preview-image kv-preview-data'
style='width:auto;height:auto;max-width:100%;max-height:100%;'>",
],
initialPreviewConfig: [
{caption: '0bd5cc2106_hd.jpg', url: '/pic/remove',
key: 4, extra: {id: 4} },
{caption: '97di-htfpvza3930503.jpg', url: '/pic/remove',
key: 5, extra: {id: 5} },
],
fileActionSettings: {
showRemove: true,
showUpload: false,
showDownload: false,
showZoom: false,
showDrag: false,
removeIcon: '<i class="fa fa-trash"></i>',
uploadIcon: '<i class="fa fa-upload"></i>',
uploadRetryIcon: '<i class="fa fa-repeat"></i>'
}
});
编辑页面:从数据表获取图片数据并显示,主要是【initialPreview】【initialPreviewConfig】这两个参数,本人是在后台把这两个配置组装好再传值到前台显示的。
效果图:
API:https://segmentfault.com/a/1190000018477200?utm_source=tag-newest#articleHeader5