如何显示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' />",
      ], */
  });

 

posted @ 2018-02-12 10:15  super超人  阅读(1601)  评论(0编辑  收藏  举报