Bootstrap fileinput配置「建议收藏」

Bootstrap fileinput配置「建议收藏」$(“#file”).fileinput({showUpload:false,overwriteInitial:false,maxFileCount:5,initialPreview:[“<imgsrc=’/profile/avatar/2019/08/29/d21d8a43f67ba3d7c07be23263e1b581.jp…

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

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

效果图:

Bootstrap fileinput配置「建议收藏」

 

API:https://segmentfault.com/a/1190000018477200?utm_source=tag-newest#articleHeader5

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/135701.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • python中的merge函数_Python Merge函数原理及用法解析[通俗易懂]

    python中的merge函数_Python Merge函数原理及用法解析[通俗易懂]Merge函数的用法jfz免费资源网简单来说Merge函数相当于Excel中的vlookup函数。当我们对2个表进行数据合并的时候需要通过指定两个表中相同的列作为key,然后通过key匹配到其中要合并在一起的values值。jfz免费资源网然后对于merge函数在Pandas中分为1vs1,多(m)vs1,以及多(m)vs多(m)这三种场景。但是平时用的最多的往往是多vs1的这种场景。也就是说2…

    2022年6月3日
    60
  • urdf 学习笔记一

    urdf 学习笔记一学习写urdf有几个地方需要注意1.一定要记住它使用的是右手坐标系。x正方向朝左,y正方向向内,z轴正方向朝上2.构建树结构,即写link和joint3.每个link的参考坐标系都在它的底

    2022年8月4日
    7
  • 软件安装:mariadb安装教程

    软件安装:mariadb安装教程MySQL被Oracle收购后,出现了一个基于MySQL的开源数据库Mariadb。下面介绍一下Mariadb在windows7上的安装过程。下载时,提示要注册,可以选择不注册。真是跟MySQL的一样啊。安装教程连接:https://jingyan.baidu.com/article/f96699bb00ce67894e3c1b9a.html…

    2022年5月29日
    38
  • retrofit2设置超时,Retrofit2 SocketTimeOutException

    retrofit2设置超时,Retrofit2 SocketTimeOutExceptionIsetupforRetrofit:privateInterceptorinterceptor=newInterceptor(){@OverridepublicResponseintercept(Chainchain)throwsIOException{Requestrequest=chain.request();if(!NetworkUtil.isNetwo…

    2022年10月19日
    4
  • IntelliJ IDEA 社区版使用指南

    IDEA的专业版商用是需要付费的,不建议大家在工作中使用破解的软件。大家完全可以使用社区版,最棒的就是大家都可以贡献插件,本文从性能调优和安装插件两个方面来阐述社区版在使用过程中需要如何操作。 0.写在前…

    2022年3月13日
    811
  • 蛋白PDB文件格式[通俗易懂]

    蛋白PDB文件格式[通俗易懂]列 数据类型字段名称 定义描述1-6 Recordname”DBREF”8-11IDcode idCode 记录的ID号13 Character

    2022年6月1日
    29

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号