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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • c++cstring头文件_fstream头文件

    c++cstring头文件_fstream头文件函数strcpy原型:char*strcpy(char*s1,constchar*s2);作用:将字符串2复制到字符数组1当中去说明:字符数组1的长度应不小于字符串2的长度”字符数组1″必须写成数组名形式,”字符串2″可以为字符数组名,也可以是一个字符串常量在未对字符数组1赋初值时,复制时将”字符串2″中的字符串和其后的”/0″一

    2022年9月12日
    0
  • Qt中操作SQLite数据库

    Qt中操作SQLite数据库0.前言SQLite是一款开源、轻量级、跨平台的数据库,无需server,无需安装和管理配置。它的设计目标是嵌入式的,所以很适合小型应用,也是Qt应用开发种常用的一种数据库。1.驱动QtSQL模块使用驱动程序插件(plugins)与不同的数据库API进行通信。由于Qt的SQL模块API与数据库无关,因此所有特定于数据库的代码都包含在这些驱动程序中。Qt提供了几个驱动程序,也可以添加其他驱动程序。提供驱动程序源代码,可用作编写自己的驱动程序的模型。QtCreator在*.pro中引入sq

    2025年6月10日
    0
  • 微信自动回复机器人使用手册怎么设置_自动回复机器人手机版

    微信自动回复机器人使用手册怎么设置_自动回复机器人手机版微信也能自动回复啦?没错,微信自动回复机器人正式上线了!今天勤劳的小编就整理了一份微信自动回复机器人的使用手册,希望对小伙伴们有所帮助。工具米云微信自动回复机器人下载/安装登录www.miyunchuanmei.com网站,下载安装Microsoft.NetFramework4.5,,下载安装米云微信自动回复机器人。登陆微信输入账号和密码,点击“登陆”按钮,即可完成登…

    2022年10月1日
    0
  • 京东金融大数据竞赛猪脸识别(3)- 图像特征提取之二

    京东金融大数据竞赛猪脸识别(3)- 图像特征提取之二深度网络既然在图像识别方面有很高的准确率,那将某一层网络输出数据作为图像特征也应该是可行的。该程序给出了使用Alexnet第七层作为激活层提取图像特征的示例。代码如下:clear;trainPath=fullfile(pwd,’image’);trainData=imageDatastore(trainPath,…’IncludeSubfolders’,true…

    2022年6月21日
    23
  • 图像处理5:Sobel边缘检测算子(C++)[通俗易懂]

    图像处理5:Sobel边缘检测算子(C++)[通俗易懂]voidCMFCworkDlg::OnBnClickedButton7(){ //TODO:在此添加控件通知处理程序代码 //Sobel算子边缘检测 Matimage=imread(“ema.jpg”,1); Matimage_gray=gray_img(image); Matgradx,grady; gradx.create(image.size(),CV_8UC1); grady.create(image.size(),CV_8UC1); for..

    2022年7月15日
    11
  • sourceinsight激活码3.5_pdf注册码及序列号

    sourceinsight激活码3.5_pdf注册码及序列号SI3US-032434-64929

    2022年9月27日
    0

发表回复

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

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