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' />",
          ], */
      });
  • 相关阅读:
    【洛谷】P1156 垃圾陷阱【DP】
    【洛谷】P1063 能量项链【区间DP】
    Android
    Android
    Android中使用ViewPager制作广告栏效果
    Android UI 设计之 TextView EditText 组件属性方法最详细解析
    GitHub 优秀的 Android 开源项目
    下载 编译 Android源代码 和 Android kernel源代码
    UML建模语言入门 -- 静态图详解 类图 对象图 包图 静态图建模实战
    Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
  • 原文地址:https://www.cnblogs.com/super-chao/p/8443853.html
Copyright © 2011-2022 走看看