前言

　　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 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; }

    }

数据库上下文：

public class PhotoDB:DbContext

    {

        public PhotoDB()

            : base("name=PhotoDB")

        {

        }

        public DbSet<Photos> Photos { get; set; }

    }

连接字符串：

<connectionStrings>

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

  </connectionStrings>

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: ;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"></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(new ImageUploader({

                queueTarget: '#J_UploaderQueue'

            }))

            //验证插件

                    .plug(new Auth({

                        //最多上传个数

                        max: ,

                        //图片最大允许大小

                        maxSize:

                    }))

            //url保存插件

                    .plug(new UrlsInput({ target: '#J_Urls' }))

            //进度条集合

                    .plug(new ProBars())

            //拖拽上传

                    .plug(new Filedrop())

            //图片预览

                    .plug(new Preview())

            ;

            //渲染默认数据

            uploader.restore();

        });

    })

</script>

</body>

</html>

后台临时保存方法：

//图片上传处理

        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 = , url = "/UpLoad/temp/" + newname });

        }

表单提交保存数据相关方法：

[HttpPost]

        public ActionResult Index(string urls, FormCollection fc)

        {

            var urlArray = urls.Split(',');

            var desArray = fc["desc"].Split(',');

            for (int i = ; i <desArray.Length; i++)

            {

                //保存为正式文件

                var filename = urlArray[i].Substring(urlArray[i].LastIndexOf('/') + );

                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 ]>

<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': - })

    .delay()

    .animate({ 'top':  }, );

        $('#footer')

    .css({ 'bottom': - })

    .delay()

    .animate({ 'bottom':  }, );

        //blocksit define

        $(window).load(function () {

            $('#container').BlocksIt({

                numOfCol: ,

                offsetX: ,

                offsetY:

            });

        });

        //window resize

        var currentWidth = ;

        $(window).resize(function () {

            var winWidth = $(window).width();

            var conWidth;

            if (winWidth < ) {

                conWidth = ;

                col =

            } else if (winWidth < ) {

                conWidth = ;

                col =

            } else if (winWidth < ) {

                conWidth = ;

                col = ;

            } else {

                conWidth = ;

                col = ;

            }

            if (conWidth != currentWidth) {

                currentWidth = conWidth;

                $('#container').width(conWidth);

                $('#container').BlocksIt({

                    numOfCol: col,

                    offsetX: ,

                    offsetY:

                });

            }

        });

    });

</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>

DEMO下载

Mvc Kissy uploader实现图片批量上传 附带瀑布流的照片墙的更多相关文章

  1. Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙

    前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...

  2. OneThink实现多图片批量上传功能

    OneThink原生系统中的图片上传功能是uploadify.swf插件进行上传的,默认是只能上传一张图片的,但是uploadify.swf是支持多图片批量上传的,那么我们稍加改动就可实现OneThi ...

  3. 利用WebUploader进行图片批量上传，在页面显示后选择多张图片压缩至指定路径【java】

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...

  4. PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  5. KindEditor图片批量上传

    KindEditor编辑器图片批量上传采用了上传插件swfupload.swf,所以后台上传文件方法返回格式应为JSONObject的String格式(注). JSONObject格式: JSONOb ...

  6. asp.net+swfupload 多图片批量上传(附源码下载)

    asp.net的文件上传都是单个文件上传方式,无法执行一次性多张图片批量上传操作,要实现多图片批量上传需要借助于flash,通过flash选取多个图片(文件),然后再通过后端服务进行上传操作. 本次教 ...

  7. webuploader 实现图片批量上传

    1.导入资源 2.JSP代码 <div class="page-container"> <div class="row cl"> < ...

  8. JAVA图片批量上传JS-带预览功能

    这篇文章就简单的介绍一个很好用的文件上传工具,批量带预览功能.直接贴代码吧,都有注释,很好理解. HTML页面 <!DOCTYPE html> <%@ taglib prefix=& ...

  9. [组件封装]微信小程序-图片批量上传照片墙

    描述 批量上传图片, 可设置最大上传个数, 可删除, 可设置默认值. 效果 源码 pictures-wall.wxml <view class="picturesWall"& ...

随机推荐

  1. phpcms v9 企业黄页加入企业会员提示“请选择企业库类型！”

    很多新进站长选择使用了PHPCMS v9内容管理系统,它强大的功能无疑吸引了很多人,尤其是企业黄页功能更是其中的佼佼者,但是官方发布的版本兼容性比较差,出现会员加入企业会员提示“请选择企业库类型!”, ...

  2. C/C++中的可变参函数

    可变参函数最好的实例:printf();参数可变 包含的头文件: C语言中:#include<stdarg.h> C++中的可变参的头文件:#include<cstdarg>, ...

  3. C++中的多重继承与虚继承的问题

    1.C++支持多重继承,但是一般情况下,建议使用单一继承. 类D继承自B类和C类,而B类和C类都继承自类A,因此出现下图所示情况: A          A \          / B     C ...

  4. UAP如何根据DeviceFamily显示不同的页面

    背景 微软推出UAP 推荐使用响应式的UI,但是难免遇到一些特殊情况需要使用不同的Page来在不同的设备显示. 微软目前最新的VS2015在10074上安装后能够支持这个功能特性,只是暂时没有文档介绍 ...

  5. android开发 java与c# 兼容AES加密

    由于android客户端采用的是AES加密,服务器用的是asp.net(c#),所以就造成了不一致的加密与解密问题,下面就贴出代码,已经试验过. using System; using System. ...

  6. asp.net asp:TextBox控件绑定值后，获取不到新值问题解决方法

    把Page_Load里绑定的代码放在    if(!IsPostBack){}里面后,即可获取到更新的值. 意思为第一次加载执行.

  7. VIM配置（转载）

    注: 转载于http://www.cnblogs.com/ma6174/ 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim配置主要有以下优点: 1.按F5可以直接编译并执行C.C++.ja ...

  8. [设计模式] 16 迭代器模式 Iterator Pattern

    在GOF的<设计模式:可复用面向对象软件的基础>一书中对迭代器模式是这样说的:提供一种方法顺序访问一个聚合对象中各个元素,而又不需要暴露该对象的内部表示. 类图和实例: 迭代器模式由以下角 ...

  9. uva 10900

    题意一直没看懂~~~~不过看懂了之后还是感觉挺好的 #include<cstdio> #include<cstring> #include<algorithm> # ...

  10. DelayedOperationPurgatory之DelayedOperation pool

    purgatory就是炼狱的意思. 当一个DelayedOperation需要被delay时,它就被放到DelayedOperationPurgatory,相当于进行一个等待池.上一篇blog提到过, ...