如何显示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' />",
], */
});
如何显示bootstrap fileinput缩略图上面的删除按钮的更多相关文章
- 去掉Bootstrap fileinput缩略图上面的上传删除按钮?
- bootstrap fileinput 文件上传
最近因为项目需要研究了下bootstrap fileinput的使用,来记录下这几天的使用心得吧. 前台html页面的代码 <form role="form" id=&quo ...
- bootstrap fileinput添加上传成功回调事件
国外牛人做的bootstrap fileinput挺酷的,但是可惜没有提供自定义上传成功回调事件的接口,因此感到非常头疼,但是很幸运的是,我在网上搜索到一个提问帖子,它问到使用Jquery的on函数绑 ...
- js 移动端写搜索时怎么调用软键盘上面的搜索按钮
这段时间一直在做移动端,所以遇到很多问题,现在很多网站在做移动端搜索的时候都不会在后面加一个搜索按钮,而是直接调用输入法上面的搜索搜索按钮进行搜索 input的一个新属性给我们提供非常方便的书写, 就 ...
- 模拟邮箱输入邮箱地址、收藏标签。input框输入内容后回车,内容显示成小方块并带删除按钮。
模拟邮箱输入邮箱地址.收藏标签: 文本框输入文字后按回车键或者分号键,输入框中的文字变成小块并带删除按钮和操作. 页面代码: <!DOCTYPE html> <%@ page lan ...
- bootstrap fileinput 文件上传工具
这是我上传的第二个plugin 首先第一点就是因为这个好看 符合bootstrap的界面风格 第二是可以拖拽(虽然我不常用这个功能 但是这样界面看起来就丰满了很多) 最后不得不吐槽这个的回发事件 我百 ...
- bootstrap fileinput+MVC 上传多文件,保存
新增用户资料,需要用户上传多笔附件,所以就尝试用了fileinput控件,显示效果如图: 首先,先在model中定义数据模型: public partial class create { [Requi ...
- datagrid上面的查询按钮设置了,但是分页工具栏不显示
原因:查询的linkbutton没有放在toolbar里. <script type="text/javascript"> $(function(){ $('#dg') ...
- 添加navbar以及上面的左右按钮代码
UINavigationBar *navBar = [[UINavigationBaralloc] initWithFrame:CGRectMake(0, 0, 824, 44)]; navBar.b ...
随机推荐
- ubuntu sublime text 2 破解版
原网地址 : http://blog.csdn.net/icephone/article/details/8217567 关于sublime text 2 的一个使用教程以及前端的不错的学习博客 ht ...
- BZOJ 2141 分块 线段树
思路: a[i] //By SiriusRen #include <cmath> #include <cstdio> #include <cstring> #inc ...
- mysql学习 1
1.数据库(Database)是按照数据结构来组织.存储和管理数据的仓库 2.RDBMS即关系数据库管理系统(Relational Database Management System)的特点: 1) ...
- Codeforces 993C. Careful Maneuvering(详细注解)
解题思路 -100和+100是没有用的,只要知道左边的飞船轴和右边的飞船轴离y轴一样近即可.为简单起见,我们将左边的轴设为-1,右边的设为1. 某个点能摧毁的飞船一定是因为有两个飞船关于这个点对称.即 ...
- 杭电 2639 Bone Collector II【01背包第k优解】
解题思路:对于01背包的状态转移方程式f[v]=max(f[v],f[v-c[i]+w[i]]);其实01背包记录了每一个装法的背包值,但是在01背包中我们通常求的是最优解, 即为取的是f[v],f[ ...
- web开发必看:你的网站支持https吗?
如果有一项技术可以让网站的访问速度更快.更安全.并且seo权重提升(百度除外),而且程序员不需要改代码就可以全站使用,最重要的是,不需要额外花钱,那有这么好的事情吗? HTTP通信协议是全球万维网ww ...
- Photoshop把图片调成固定的像素。
1.用PhotoShop打开需要修改的图片. 2.点击“窗口”菜单的“图层”子菜单,打开图层控制面板(快捷键F7).3.用鼠标左键双击“图层”面板的“背景”图层.在弹出窗口中点击“确定”按钮,解锁背景 ...
- runloop的source
以上是完整的 CFRunLoop 和 CFRunLoopMode 的结构体源码(太长了我的妈,用不着看完),下面我精简一下,把重要的留下,看如下代码(可以仔细看一下,加深印象): 上面是精简出来比较关 ...
- Qwiklab'实验-API Gateway, AWS Lambda'
title: AWS之Qwiklab subtitle: 2. Qwiklab'实验-API Gateway, AWS Lambda' date: 2018-09-20 17:29:20 --- In ...
- markdown图片设置
工具:typora 1. 设置图片大小(本节引用自 https://support.typora.io/Resize-Image/) Typora允许使用<img>标签显示图像,也可用于调 ...