Mvc Kissy uploader实现图片批量上传 附带瀑布流的照片墙
前言
KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架。它具备模块化、高扩展性、组件齐全,接口一致、自主开发、适合多种应用场景等特性。本人在一次项目中层使用这个uploader组件。
关于kissy uploader:
Uploader是非常强大的异步文件上传组件,支持ajax、iframe、flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持和常用插件,比如验证、图片预览、进度条等。
广泛应用于淘宝网,比如退款系统、爱逛街、二手、拍卖、我的淘宝、卖家中心、导购中心等。
拥有非常不错的扩展性,可以自己定制主题和插件。
uploader的特性:
- 支持ajax、flash、iframe三种方案,兼容所有浏览器。(iframe不推荐使用)
- 多主题支持,可以自己定制主题
- 支持多选批量上传
- 支持上传进度显示
- 支持取消上传
- 支持图片预览(使用flash上传不支持)
- 支持上传验证
- 多种配置方式
Kissy uploader配置简单而且使用方便,官网提供许多主题稍加修改便可用于项目当中,本文的案例采用的是kissy uploader的在线js库。更多的资料大家可以去官网:汇总查找相关资料,讲述的很全面。
相关配置
1、本文照片的相关信息我采用EF coder first将其保存在数据库中了,相关代码
实体类:
[Table("Photos")]public classPhotos{[Key]public int ID { get; set; }public string Name { get; set; }public string Desc { get; set; }public string Src { get; set; }public DateTime? PubliseTime { get; set; }}
View Code
数据库上下文:
public classPhotoDB:DbContext{publicPhotoDB():base("name=PhotoDB"){}public DbSet<Photos> Photos { get; set; }}
View Code
连接字符串:
<connectionStrings><add name="PhotoDB" connectionString="server=(local);Initial Catalog=Photo;Integrated Security=SSPI" providerName="System.Data.SqlClient" /></connectionStrings>
View Code
2、上传图片配置(相关配置说明大家可以参考官网示例)
<!doctype html> <html> <head><meta charset="utf-8"/><script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js" charset="utf-8"></script><style type="text/css">.textvalue{padding:0;width: 118px;border-top: 1px solid #E2E2E2;height: 25px;}.sub{height:30px; width:120px;position:relative;top:30px;}</style> </head> <body>@using (Html.BeginForm()) {<div class="grid"><input type="file" class="g-u" id="J_UploaderBtn" value="上传图片" name="Filedata" /><input type="hidden" id="J_Urls" name="urls" value="" /><div class="g-u">还可以上传<span id="J_UploadCount">14</span>张图片</div></div><ul id="J_UploaderQueue" class="grid"><script type="text/uploader-theme"><li id="queue-file-{id}" class="g-u" data-name="{name}" style="height: 140px !important"> <div class="pic"> <a href="javascript:void(0);"><img class="J_Pic_{id} preview-img" src="" /></a> </div> <div class="J_Mask_{id} pic-mask"></div> <div class="status-wrapper"> <div class="status waiting-status"><p>等待上传,请稍候</p></div> <div class="status start-status progress-status success-status"> <div class="J_ProgressBar_{id}"><s class="loading-icon"></s>上传中...</div> </div> <div class="status error-status"> <p class="J_ErrorMsg_{id}">上传失败,请重试!</p></div></div><a class="J_Del_{id} del-pic" href="#">删除</a><input type="text" value="" name="desc" id="desc" class="textvalue" placeholder="描述"></li></script></ul><input type="submit" value="保存" class="sub" />}<script type="text/javascript">var S =KISSY;if(S.Config.debug) {var srcPath = "../../../../";S.config({packages: [{name:"gallery",path: srcPath,charset:"utf-8"}]});}var $ =S.Node.all;S.use('gallery/uploader/1.4/index,gallery/uploader/1.4/themes/imageUploader/index,gallery/uploader/1.4/themes/imageUploader/style.css', function (S, Uploader, ImageUploader) {//上传插件var plugins = 'gallery/uploader/1.4/plugins/auth/auth,' +'gallery/uploader/1.4/plugins/urlsInput/urlsInput,' +'gallery/uploader/1.4/plugins/proBars/proBars,' +'gallery/uploader/1.4/plugins/filedrop/filedrop,' +'gallery/uploader/1.4/plugins/preview/preview';S.use(plugins, function (S, Auth, UrlsInput, ProBars, Filedrop, Preview) {var uploader = new Uploader('#J_UploaderBtn', {//处理上传的服务器端脚本路径action: "/Home/PictureUpload",multiple:true});//上传成功后显示图片描述uploader.on('success', function (ev) {var result =ev.file.result;if(result.desc) {var $desc = $('.J_Desc_' +ev.file.id);$desc.html(result.desc);}})//使用主题uploader.theme(newImageUploader({queueTarget:'#J_UploaderQueue'}))//验证插件.plug(newAuth({//最多上传个数max: 14,//图片最大允许大小maxSize: 2000}))//url保存插件.plug(new UrlsInput({ target: '#J_Urls'}))//进度条集合.plug(newProBars())//拖拽上传.plug(newFiledrop())//图片预览.plug(newPreview());//渲染默认数据 uploader.restore();});})</script> </body> </html>
View Code
后台临时保存方法:
//图片上传处理publicActionResult PictureUpload(){//保存到临时文件HttpPostedFileBase postedfile = Request.Files["Filedata"];var filename =postedfile.FileName;var newname =Guid.NewGuid()+filename.Substring(filename.LastIndexOf('.'));var filepath = Server.MapPath("/UpLoad/temp/") +newname;Image image= Image.FromStream(postedfile.InputStream, true);image.Save(filepath);//保存为图片return Json(new { status = 1, url = "/UpLoad/temp/" +newname });}
View Code
表单提交保存数据相关方法:
[HttpPost]public ActionResult Index(stringurls, FormCollection fc){var urlArray = urls.Split(',');var desArray = fc["desc"].Split(',');for (int i = 0; i <desArray.Length; i++){//保存为正式文件var filename = urlArray[i].Substring(urlArray[i].LastIndexOf('/') + 1);var oldfile =Server.MapPath(urlArray[i]);var newfile = Server.MapPath("/UpLoad/photo/")+filename;System.IO.File.Move(oldfile, newfile);db.Photos.Add(new Photos { Name = filename, Desc = desArray[i], Src = "/UpLoad/photo/"+filename, PubliseTime =DateTime.Now });}db.SaveChanges();returnView();}
View Code
3、瀑布流照片墙
后台返回所有照片实体类传递给视图
//照片墙publicActionResult Photo(){var photos =db.Photos.ToList();returnView(photos);}
View Code
前台动态加载图片js及照片墙页面:
@model List<MvcApplication3.Models.Photos>@{Layout= null;}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>jQuery实现的瀑布流布局的图片特效代码</title> <link href="../../Content/lanrenzhijia.css" rel="stylesheet" type="text/css" /> <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="../../Scripts/blocksit.min.js" type="text/javascript"></script> <script>$(document).ready(function () {//vendor script$('#header').css({'top': -50}).delay(1000).animate({'top': 0 }, 800);$('#footer').css({'bottom': -15}).delay(1000).animate({'bottom': 0 }, 800);//blocksit define $(window).load(function () {$('#container').BlocksIt({numOfCol:5,offsetX:8,offsetY:8});});//window resizevar currentWidth = 1100;$(window).resize(function () {var winWidth =$(window).width();varconWidth;if (winWidth < 660) {conWidth= 440;col= 2}else if (winWidth < 880) {conWidth= 660;col= 3}else if (winWidth < 1100) {conWidth= 880;col= 4;}else{conWidth= 1100;col= 5;}if (conWidth !=currentWidth) {currentWidth=conWidth;$('#container').width(conWidth);$('#container').BlocksIt({numOfCol: col,offsetX:8,offsetY:8});}});});</script> </head> <body> <!-- Content --> <section id="wrapper"><div id="container">@foreach (var item inModel){<div class="grid"><div class="imgholder"> <img src="@item.Src" /> </div><strong>@item.Desc</strong><p>上 传 时 间:</p><div class="meta">@item.PubliseTime.ToString()</div></div>}<!----></div> </section> </body> </html>
View Code
DEMO下载
转载于:https://www.cnblogs.com/weixing/p/3245236.html
Mvc Kissy uploader实现图片批量上传 附带瀑布流的照片墙相关推荐
- plupload php实例,thinkPHP5框架整合plupload实现图片批量上传
这篇文章主要介绍了关于thinkPHP5框架整合plupload实现图片批量上传,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 本文实例讲述了thinkPHP5框架整合plupload ...
- ajax 批量上传图片插件,TinyMCE多图片批量上传(Ajax)教程
需要用上插件:axupimgs 插件作者:莫若卿 支持版本:5.0.4+ 支持语言:仅中文 插件版本:1.6 一.axupimgs 插件作用: 这是一个tinymce多图片批量上传插件,支持拖拽文件添 ...
- Android 图片 批量上传,移动端图片批量上传问题
一.操作系统 1.ios ios的操作系统: 实现图片批量上传,可以直接使用input type=file 加上multiple 就可以实现,至于有些图片显示有问题可以通过 new FileRead ...
- 分享一个图片管理程序,图片批量上传,图片管理(有图片)
呵呵,好久没写博客了.今天在此奉上一篇! 关于图片管理,其实做项目很多地方都用到图片管理. 比如:产品图片,新闻图片,作品图片. 现分享一篇关于图片管理的文章,希望大家能用得上. 先来看效果图吧: 上 ...
- php图片批量上传插件下载,jQuery的多图片批量上传插件
jQuery的多图片批量上传插件 js代码 $(function(){ //上传图片 var $tgaUpload = $('#goodsUpload').diyUpload({ url:'uploa ...
- jQuery图片批量上传插件源码,支持批量上传、预览、删除、放大,可配置上传数量、上传大小、追加方式,含详细使用文档
jQuery图片批量上传插件源码,支持批量上传.预览.删除.放大,可配置上传数量.上传大小.追加方式,含详细使用文档 程序包内含使用Demo 完整程序源代码:jQuery图片批量上传插件源码 上传前 ...
- JCK Editor 结合jQuery Upload File 增加图片批量上传功能
项目需准备文件: jQuery File Upload 上传插件,下载地址:https://github.com/JennerZhang/jQuery-File-Upload Joomla JFUpl ...
- php图片批量上传插件下载,vue.js图片批量上传插件
vue.js图片批量上传插件是一款基于vue.js框架的图片上传控件,适用于手机端的图片上传代码,支持批量上传,拖到图片上传,显示文件数量和大小等功能 js代码 // import up from ' ...
- 解决KindEditor无法安装flash插件实现图片批量上传
由于现在无法下载使用flash插件,导致KindEditor有的功能丧失,无法使用,本文主要解决图片无法批量上传的问题. 由于公司项目是混编项目,比较老旧且业务复杂,使用KindEditor的地方较多 ...
最新文章
- 以太坊区块链同步_以太坊69:如何在10分钟内建立完全同步的区块链节点
- [C#]ASP.NET MVC 3 在线学习资料
- 科大讯飞和百度语音平台语音识别Java调用记录
- 初等数论--同余--欧拉函数、欧拉定理、费马小定理
- UML图大科普 :14种UML图图例详解
- 《数据结构C语言版》——栈和队列详解(图文并茂),从零开始的学习
- 获取Windows mobile 开始菜单里最近打开的程序(Recent Programs)
- erp系统原理和实施第五版pdf_ERP系统实施费用!
- 串口调试助手哪个好用_哪个员工考勤系统好用?选择打卡助手就对了
- java开发面试项目经验
- mysql提示表不存在的解决方法error: 1146: Table doesn‘t exist
- Sophix及热修复原理介绍
- MATLAB系统辨识工具箱学习,详细教程!
- python list 元素位置,怎么查找python列表中元素的位置
- [SeLinux]audit2allow安装与使用
- C++小游戏 苍穹世界2.2 测试版
- RT-Thread柿饼控件(3)-- Canvas
- 51单片机生成C语言矩形波,单片机产生方波、锯齿波、三角波程序
- python对于0x01的处理
- 用AHP层次分析法挑选最佳结婚对象