zoukankan      html  css  js  c++  java
  • 如何显示bootstrap fileinput缩略图上面的删除按钮

    bootstrap上传文件控件初始化js:

    //bootstrap上传文件控件
    $(".fileupload").fileinput({
        language: "zh",
        showUpload: false,
        //uploadUrl: "/Product/imgDeal",
        autoReplace: true,
        maxFileCount: 1,
    
        //allowedFileExtensions: ["jpg", "png", "gif"],
        browseClass: "btn btn-primary", //按钮样式 
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        /* initialPreview: [
                 "<img src='http://xxx/1.png' class='file-preview-image' />",    
                 ], */
    });

    1.当注释掉uploadUrl的时候,缩略图上的上传、删除按钮会消失:

    2.当加上uploadUrl的时候,缩略图上的上传、删除按钮会出现

    注意:

    uploadUrl后面的内容不能为“”,它会影响到缩略图上按钮的显示,也会对拖拽区域(dropZoneEnabled)的显示有影响。

    附:

    初始化bootstrap文件上传控件的js:

    //bootstrap上传文件控件
      /*$(".fileupload").fileinput({
          language: 'zh', //设置语言
          uploadUrl: 'uploadUrl', //上传的地址
          allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
          showUpload: false, //是否显示上传按钮
          showCaption: false,//是否显示标题
          browseClass: "btn btn-primary", //按钮样式
          //dropZoneEnabled: false,//是否显示拖拽区域
          //minImageWidth: 50, //图片的最小宽度
          //minImageHeight: 50,//图片的最小高度
          //maxImageWidth: 1000,//图片的最大宽度
          //maxImageHeight: 1000,//图片的最大高度
          //maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
          //minFileCount: 0,
          maxFileCount: 10, //表示允许同时上传的最大文件个数
          enctype: 'multipart/form-data',
          validateInitialCount:true,
          //previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
          msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!"
      });*/
    
      $(".fileupload").fileinput({
          language: "zh",
          showUpload: false,
          uploadUrl: "/Product/imgDeal",
          autoReplace: true,
          maxFileCount: 1,
    
          //allowedFileExtensions: ["jpg", "png", "gif"],
          browseClass: "btn btn-primary", //按钮样式
          previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
          /* initialPreview: [
         "< img src='http://xxx/1.png' class='file-preview-image' />",
          ], */
      });
  • 相关阅读:
    MyBatis insert 返回主键的方法
    Linux实时网络监控工具:iftop
    深入理解Spring MVC 思想
    spring启动时加载字典表数据放入map
    mysql PROCEDURE ANALYSE() 用法
    http://www.cnblogs.com/shihaiming/
    maven 多模块项目
    分布式存储 CentOS6.5虚拟机环境搭建FastDFS-5.0.5集群(转载-2)
    Nginx1.8.0版本平滑升级新版本1.9.7
    Linux 添加Nginx 到 service 启动
  • 原文地址:https://www.cnblogs.com/super-chao/p/8443853.html
Copyright © 2011-2022 走看看