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将其保存在数据库中了，相关代码

实体类：

[Table("Photos")]
    public class Photos
    {
        [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 class PhotoDB:DbContext
    {
        public PhotoDB()
            : base("name=PhotoDB")
        {

        }
        public DbSet Photos { get; set; }
    }

View Code

连接字符串：

    "PhotoDB" connectionString="server=(local);Initial Catalog=Photo;Integrated Security=SSPI" providerName="System.Data.SqlClient" />
  

View Code

2、上传图片配置（相关配置说明大家可以参考官网示例）

上传页面index：

    "utf-8"/>
    
    


@using (Html.BeginForm())
{
    
class="grid">
        "file" class="g-u" id="J_UploaderBtn" value="上传图片" name="Filedata" />
        "hidden" id="J_Urls" name="urls" value="" />
        
class="g-u">还可以上传"J_UploadCount">14张图片
    
    
"J_UploaderQueue" class="grid">
        
    
    "submit" value="保存" class="sub" />
}

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 )
            {
                //保存为正式文件
                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
@{Layout = null;}
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">

"Content-Type" content="text/html; charset=gb2312">

"../../Content/lanrenzhijia.css" rel="stylesheet" type="text/css" />







"wrapper">
  
"container">
  @foreach (var item in Model)
  {
    
class="grid">
      
class="imgholder"> "@item.Src" /> 
      @item.Desc
      
上 传 时 间：
      
class="meta">@item.PubliseTime.ToString()
    

  }
    
  

瀑布流采用国外的一个jquery插件实现。

结语

　　本人强烈推荐采用kissy uploader上传插件，原因在于：采用的上传方案，当值是数组时，比如“type” : ["flash","ajax","iframe"]，按顺序获取浏览器支持的方式，该配置会优先使用flash上传方式，如果浏览器不支持flash，会降级为ajax，如果还不支持ajax，会降级为iframe；当值是字符串时，比如“type” : “ajax”，表示只使用ajax上传方式。这种方式比较极端，在不支持ajax上传方式的浏览器会不可用；当“type” : “auto”，auto是一种特例，等价于["ajax","iframe"]。这一点很重要，由于以前一个项目采用flash上传，当遇到移动设备时发现不支持上传了，采用该插件则不会出现此问题。

DEMO下载

文章结束，建议大家一块推荐此插件，顺便顶下文章，呵呵。

转载于:https://www.cnblogs.com/flykai/p/3239981.html