Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙
前言
KISSY 
是由阿里集团前端工程师们发起创建的一个开源 JS 框架。它具备模块化、高扩展性、组件齐全，接口一致、自主开发、适合多种应用场景等特性。本人在一次项目中层使用这个uploader组件。
关于kissy uploader：
Uploader是非常强大的异步文件上传组件，支持ajax、iframe、flash三套方案，实现浏览器的全兼容，调用非常简单，内置多套主题支持和常用插件，比如验证、图片预览、进度条等。
广泛应用于淘宝网，比如退款系统、爱逛街、二手、拍卖、我的淘宝、卖家中心、导购中心等。
拥有非常不错的扩展性，可以自己定制主题和插件。
uploader的特性：
- 支持ajax、flash、iframe三种方案，兼容所有浏览器。（iframe不推荐使用）
- 多主题支持，可以自己定制主题
- 支持多选批量上传
- 支持上传进度显示
- 支持取消上传
- 支持图片预览（使用flash上传不支持）
- 支持上传验证
- 多种配置方式
Kissy uploader配置简单而且使用方便，官网提供许多主题稍加修改便可用于项目当中，本文的案例采用的是kissy uploader的在线js库。更多的资料大家可以去官网：http://gallery.kissyui.com/uploader/1.4/guide/index.html#demo汇总查找相关资料，讲述的很全面。
案例截图
相关配置
1、本文照片的相关信息我采用EF coder first将其保存在数据库中了，相关代码
实体类：
View Code数据库上下文：
View Code连接字符串：
View Code2、上传图片配置（相关配置说明大家可以参考官网示例）
上传页面index：
View Code后台临时保存方法：
//图片上传处理 public ActionResult 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 }); }
表单提交保存数据相关方法：
[HttpPost] public ActionResult Index(string urls, 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(); return View(); }
3、瀑布流照片墙
后台返回所有照片实体类传递给视图;
//照片墙 public ActionResult Photo() { var photos = db.Photos.ToList(); return View(photos); }
前台动态加载图片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 resize var currentWidth = 1100; $(window).resize(function () { var winWidth = $(window).width(); var conWidth; 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 in Model) { <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>
瀑布流采用国外的一个jquery插件实现。
结语
本人强烈推荐采用kissy uploader上传插件，原因在于：采用的上传方案，当值是数组时，比如“type” : ["flash","ajax","iframe"]，按顺序获取浏览器支持的方式，该配置会优先使用flash上传方式，如果浏览器不支持flash，会降级为ajax，如果还不支持ajax，会降级为iframe；当值是字符串时，比如“type” : “ajax”，表示只使用ajax上传方式。这种方式比较极端，在不支持ajax上传方式的浏览器会不可用；当“type” : “auto”，auto是一种特例，等价于["ajax","iframe"]。这一点很重要，由于以前一个项目采用flash上传，当遇到移动设备时发现不支持上传了，采用该插件则不会出现此问题。
文章结束，建议大家一块推荐此插件，顺便顶下文章，呵呵。