bootstrap-fileinput 图片上传
bootstrap-fileinput 源文件 在网上下载
CSS:
<link href="../../static/Bootstrap/css/plugins/bootstrap-fileinput/fileinput.min.css" rel="stylesheet" />
JS:
<script src="../../static/Bootstrap/js/plugins/bootstrap-fileinput/fileinput.min.js"></script>
<script src="../../static/Bootstrap/js/plugins/bootstrap-fileinput/fileinput_locale_zh.js"></script>
HTML代码:
<form enctype="multipart/form-data">
<div class="row" style="height: 500px">
<input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1">
</div>
</form>
//上传
$("#file-1").fileinput({
uploadUrl: '/Handler/upload.ashx', // 图片上传URL
allowedFileExtensions: ['jpg', 'png', 'gif'],
overwriteInitial: false,
maxFileSize: 1000,
maxFilesNum: 10,
allowedFileTypes: ['image', 'video', 'flash'],
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
}
}); //回调函数 当上次成功之后 返回
$("#file-1").on("fileuploaded", function(event, data, previewId, index) {
alert(data.response.JsMessage) })
upload.ashx 一般处理程序,返回json 格式:
context.Response.Write(JsonConvert.SerializeObject(new { success = true, JsCode = , JsMessage = "返回的信息" }));
bootstrap-fileinput 图片上传的更多相关文章
- bootstrap fileinput 文件上传工具
这是我上传的第二个plugin 首先第一点就是因为这个好看 符合bootstrap的界面风格 第二是可以拖拽(虽然我不常用这个功能 但是这样界面看起来就丰满了很多) 最后不得不吐槽这个的回发事件 我百 ...
- bootstrap fileinput添加上传成功回调事件
国外牛人做的bootstrap fileinput挺酷的,但是可惜没有提供自定义上传成功回调事件的接口,因此感到非常头疼,但是很幸运的是,我在网上搜索到一个提问帖子,它问到使用Jquery的on函数绑 ...
- bootstrap fileinput 文件上传
最近因为项目需要研究了下bootstrap fileinput的使用,来记录下这几天的使用心得吧. 前台html页面的代码 <form role="form" id=&quo ...
- bootstrap fileinput+MVC 上传多文件,保存
新增用户资料,需要用户上传多笔附件,所以就尝试用了fileinput控件,显示效果如图: 首先,先在model中定义数据模型: public partial class create { [Requi ...
- Spring Boot+BootStrap fileInput 多图片上传
一.依赖文件 <link rel="stylesheet" type="text/css" th:href="@{/js/bootstrap/c ...
- bootstrap fileinput实现限制图片上传数量及如何控制分批多次上传
废话没有,直奔主题 问题点: fileinput提供了一个maxFileCount用于限制图片上传的数量,设置maxFileCount为1时,一次性选择超过一张会有如下提示: 当选择一张,不点上传,再 ...
- C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
- 包含修改字体,图片上传等功能的文本输入框-Bootstrap
通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...
- MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件
场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...
- ASP.Net MVC3 图片上传详解(form.js,bootstrap)
图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo.完全是用jquery前后交互,没有用插件. 最终效果图如下: 玩过花田人 ...
随机推荐
- CSS现代字体栈
CSS字体栈是一系列的字体,它包含了能在不同操作系统和平台上战士的字体,以尽可能的使排版保持一致性.浏览器会在font-family规定的所有字体中从前往后一次查找,如果找不到当前字体就查找下一个字体 ...
- APUE第4章 文件和目录
4.2 文件函数 #include <sys/stat.h> int stat(const char *restrict pathname, struct stat *restrict b ...
- C# 请求外部服务的办法
) { returnMenuBeizhu = ; ).ToString() borrowT ...
- RocketMQ学习记录
RocketMQ是一款分布式.队列模型的消息中间件,具有以下特点: 1.能够保证严格的消息顺序 2.提供丰富的消息拉取模式 3.高效的订阅者水平扩展能力 4.实时的消息订阅机制 5.亿级消息堆积能力 ...
- 来,让我们谈一谈Normalize.css
本文译自 http://nicolasgallagher.com/about-normalize-css/最初发布于我的博客:http://jerryzou.com/posts/aboutNormal ...
- Mysql迁移工具在生产环境下的使用
在产品迭代开发发布过程中,由于业务需求的增加,数据库难免会有结构调整等操作. 在每个版本发布过程中怎么控制每个版本server端程序与数据库版本保持一致,以及数 据库升级.回滚等操作. 本博文宅鸟将向 ...
- jquery animate 动画效果使用说明
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性 ...
- DBLINK 创建与小结
1.DBLINK 的作用 当用户要跨本地数据库,访问另外一个数据库表中的数据时,本地数据库中必须创建了远程数据库的dblink,通过dblink本地数据库可以像访问本地数据库一样访问远程数据库表中的数 ...
- “requireJs前传”之为什么要用前端模块化?
对于没有接触过后台的前端同学想要理解模块化是很困难的,鉴于未来的趋势,以下是我转载的一篇文章,希望对大家有用! 特此声明:转载文章,不喜勿喷.和谐前端,世界和平!0.0 模块的写法 随着网站逐渐变成” ...
- 批量关闭 WordPress 的 Pingback 和 Trackback 功能
方法很简单,WordPress 后台即可实现,在设置-讨论中把"接收来自外部博客的引用通告(Pingback 和 Trackback)"这一项勾选去掉,保存设置.这样,以后新增的文 ...