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

原文地址:https://www.cnblogs.com/super-chao/p/8443853.html

时间: 2024-10-15 16:53:34

如何显示bootstrap fileinput缩略图上面的删除按钮的相关文章

SWT中子窗口始终显示在主窗口上面的方法

只需要在创建子窗口的时候,设置一下其属性就可以了,所设置的属性为:SWT.ON_TOP.例如: PopUpChartWin win = new PopUpChartWin(display, SWT.SHELL_TRIM | SWT.ON_TOP); 就这样了.另外附窗口设置的属性参数一览表(别处拷贝粘贴来的). BORDER--当只有BORDER的时候,窗口是一个只有细细白色边框的空白窗口,没有title那一圈蓝色的边框,也没有最大化,最小化,关闭.不能resize,不能移动.在任务栏里右键没有

添加navbar以及上面的左右按钮代码

UINavigationBar *navBar = [[UINavigationBaralloc] initWithFrame:CGRectMake(0, 0, 824, 44)]; navBar.barStyle = UIBarStyleDefault; UINavigationItem *navItem = [[UINavigationItemalloc] init]; navItem.leftItemsSupplementBackButton = YES; navItem.title =

bootstrap fileinput添加上传成功回调事件

国外牛人做的bootstrap fileinput挺酷的,但是可惜没有提供自定义上传成功回调事件的接口,因此感到非常头疼,但是很幸运的是,我在网上搜索到一个提问帖子,它问到使用Jquery的on函数绑定事件绑定fileuploaded为什么没有获取到response的数据, 我看到这个马上眼前一亮,赶紧试一试,自己测试发现果然可以耶!返回的response数据也很全呢,那位兄弟为什么就不可以?不管怎样,还是谢谢他的建议. 很简单一条语句经验可以解决这样的难题,jquery真是牛逼: $("#fi

bootstrap fileinput 文件上传工具

这是我上传的第二个plugin 首先第一点就是因为这个好看 符合bootstrap的界面风格 第二是可以拖拽(虽然我不常用这个功能 但是这样界面看起来就丰满了很多) 最后不得不吐槽这个的回发事件 我百度了很久才找到 CSDN上面也问了 不知道是自己百度的方式不正确还是别的什么原因..好吧 我蠢 地址  http://plugins.krajee.com/file-input https://github.com/kartik-v/bootstrap-fileinput 效果图 这里以我一个项目的

datagrid上面的查询按钮设置了,但是分页工具栏不显示

原因:查询的linkbutton没有放在toolbar里. 1 <script type="text/javascript"> 2 $(function(){ 3 $('#dg').datagrid({ 4 url:'ContactServlet', 5 toolbar:'#tb', 6 fit:true, 7 fitColumns:true, 8 rownumbers:true, 9 pagination:true, 10 idField : 'id', 11 colum

JS文件上传神器bootstrap fileinput详解

Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一段调用方发和servlet端的接收代码,未完待续. 引言: 一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x.本插件对多种类型的文件提供文件预览,并且提供了多选等功能.本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap CSS3样式.通过

结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用,整合两者可以实现我们常规的Web数据导入操作,导入数据操作过程包括有上传文件,预览数据,选择并提交记录等一系列操作. 关于这个插件,我在早期随笔<Bootstrap文件上传插件File Input的使用>也做了一次介绍,这是一个增强的 HTML5 文件输入控件,是一个 Bootstrap 3.x

struts2在标签中删除按钮的id传值问题

<!--显示数据列表--> <tbody id="TableData" class="dataContainer" datakey="departmentList"> <s:iterator value="#departmentList"> <tr class="TableDetail1 template"> <td><a href=&quo

关于Bootstrap fileinput 上传新文件,移除时触发服务器同步删除的配置

在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 来同步删除服务器上的文件和记录.但新上传的文件则需要其他方式来同步删除服务器记录. 在配置中遇到的一些问题,记录一下. fileinput在文件上传成功后会触发'fileuploaded'事件,移除图片后会触发'filesuccessremove'事件. 其中在fileuploaded中参数previewId是形如