Bootstrap fileinput配置「建议收藏」

全栈程序员站长

发布于 2022-08-18 20:58:29

8620

发布于 2022-08-18 20:58:29

大家好，又见面了，我是你们的朋友全栈君。

$("#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】这两个参数，本人是在后台把这两个配置组装好再传值到前台显示的。

效果图：