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缩略图上面的删除按钮的更多相关文章

  1. 去掉Bootstrap fileinput缩略图上面的上传删除按钮?

  2. bootstrap fileinput 文件上传

    最近因为项目需要研究了下bootstrap fileinput的使用,来记录下这几天的使用心得吧. 前台html页面的代码 <form role="form" id=&quo ...

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

    国外牛人做的bootstrap fileinput挺酷的,但是可惜没有提供自定义上传成功回调事件的接口,因此感到非常头疼,但是很幸运的是,我在网上搜索到一个提问帖子,它问到使用Jquery的on函数绑 ...

  4. js 移动端写搜索时怎么调用软键盘上面的搜索按钮

    这段时间一直在做移动端,所以遇到很多问题,现在很多网站在做移动端搜索的时候都不会在后面加一个搜索按钮,而是直接调用输入法上面的搜索搜索按钮进行搜索 input的一个新属性给我们提供非常方便的书写, 就 ...

  5. 模拟邮箱输入邮箱地址、收藏标签。input框输入内容后回车,内容显示成小方块并带删除按钮。

    模拟邮箱输入邮箱地址.收藏标签: 文本框输入文字后按回车键或者分号键,输入框中的文字变成小块并带删除按钮和操作. 页面代码: <!DOCTYPE html> <%@ page lan ...

  6. bootstrap fileinput 文件上传工具

    这是我上传的第二个plugin 首先第一点就是因为这个好看 符合bootstrap的界面风格 第二是可以拖拽(虽然我不常用这个功能 但是这样界面看起来就丰满了很多) 最后不得不吐槽这个的回发事件 我百 ...

  7. bootstrap fileinput+MVC 上传多文件,保存

    新增用户资料,需要用户上传多笔附件,所以就尝试用了fileinput控件,显示效果如图: 首先,先在model中定义数据模型: public partial class create { [Requi ...

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

    原因:查询的linkbutton没有放在toolbar里. <script type="text/javascript"> $(function(){ $('#dg') ...

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

    UINavigationBar *navBar = [[UINavigationBaralloc] initWithFrame:CGRectMake(0, 0, 824, 44)]; navBar.b ...

随机推荐

  1. [jzoj 6093] [GDOI2019模拟2019.3.30] 星辰大海 解题报告 (半平面交)

    题目链接: https://jzoj.net/senior/#contest/show/2686/2 题目: 题解: 说实话这题调试差不多花了我十小时,不过总算借着这道题大概了解了计算几何的基础知识 ...

  2. Java基础——类和对象的初始化过程

    本节把类和对象的初始化所涉及到的所有代码块阐述一边. 示例代码: public class Demo { private static String name; private String age; ...

  3. null和undifned的区别

    null和undifned的区别 1 从类型方面:null的类型是对象,undified的类型是undified. 2 从定义方面:null是一个表示"无"的对象,转为数值时为0: ...

  4. CorelDRAW教程:怎样绘制制作箭头流程图?

    箭头流程图主要由矢量图和连接符组成,通过图形之间的顺序阐述的一个过程,应用也是非常广泛,有些软件中会自带流程图,对于CDR这款矢量绘图软件来说,手动制作流程图是简单且高效的.首先CorelDRAW中就 ...

  5. C# 正则表达式大全(转载)

    文章导读 正则表达式的本质是使用一系列特殊字符模式,来表示某一类字符串.正则表达式无疑是处理文本最有力的工具,而.NET提供的Regex类实现了验证正则表达式的方法.Regex 类表示不可变(只读)的 ...

  6. java中端口号被占用的解决办法

    第一步,命令提示符号,执行命令:netstat -ano 可见,占用1099端口的进程的PID是10460. 第二步,命令提示符号,执行命令:tasklist(通过pid 10460定位) 可见,该占 ...

  7. Ubuntu_18.04安装网易云音乐

    首先到网易云音乐官网下载网易云音乐,ubuntu版的,安装. 这时候的图标打不开,缺少libcanberra sudo apt install libcanberra-gtk-module 安装完了配 ...

  8. 机器学习实战笔记--AdaBoost(实例代码)

    #coding=utf-8 from numpy import * def loadSimpleData(): dataMat = matrix([[1. , 2.1], [2. , 1.1], [1 ...

  9. springcloud关键词解释和基础代码

    原文来自某位大神(不诉薄凉),感觉很好,分享出来. SpringCloud微服务框架搭建 一.微服务架构 1.1什么是分布式 不同模块部署在不同服务器上 作用:分布式解决网站高并发带来问题 1.2什么 ...

  10. python_函数传递列表

    '''#创建一个空列表,包含一些要打印的设计unprinted_designs = ['iphone','robot','books']completed_modles = [] #模拟打印每个设计, ...