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 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>
Mvc Kissy uploader实现图片批量上传 附带瀑布流的照片墙的更多相关文章
- Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙
前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...
- OneThink实现多图片批量上传功能
OneThink原生系统中的图片上传功能是uploadify.swf插件进行上传的,默认是只能上传一张图片的,但是uploadify.swf是支持多图片批量上传的,那么我们稍加改动就可实现OneThi ...
- 利用WebUploader进行图片批量上传,在页面显示后选择多张图片压缩至指定路径【java】
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...
- PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- KindEditor图片批量上传
KindEditor编辑器图片批量上传采用了上传插件swfupload.swf,所以后台上传文件方法返回格式应为JSONObject的String格式(注). JSONObject格式: JSONOb ...
- asp.net+swfupload 多图片批量上传(附源码下载)
asp.net的文件上传都是单个文件上传方式,无法执行一次性多张图片批量上传操作,要实现多图片批量上传需要借助于flash,通过flash选取多个图片(文件),然后再通过后端服务进行上传操作. 本次教 ...
- webuploader 实现图片批量上传
1.导入资源 2.JSP代码 <div class="page-container"> <div class="row cl"> < ...
- JAVA图片批量上传JS-带预览功能
这篇文章就简单的介绍一个很好用的文件上传工具,批量带预览功能.直接贴代码吧,都有注释,很好理解. HTML页面 <!DOCTYPE html> <%@ taglib prefix=& ...
- [组件封装]微信小程序-图片批量上传照片墙
描述 批量上传图片, 可设置最大上传个数, 可删除, 可设置默认值. 效果 源码 pictures-wall.wxml <view class="picturesWall"& ...
随机推荐
- class_create(),device_create()使用
开始写Linux设备驱动程序的时候,很多时候都是利用mknod命令手动创建设备节点(包括ldd3中不少例子也是这样),实际上现在Linux内核为我们提供了一组函数,可以用来在模块加载的时候自动在/de ...
- CSS3 transition 属性 过渡效果
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; backg ...
- 【Go】http server 性能测试
node秒java几街!pathon秒node几街 !go秒pathon几街! ab测试性能极佳的 package main import ( "fmt" "html/t ...
- 我应该直接学Swift还是Objective-C?
当我们发布了Swift语言学习课程之后,收到了很多邮件和私信来问自己是否还需要学习C或者Objective-C.此外,人们似乎还在迷惑Swift到底适合iOS开发生态中的哪些部分.通过这篇文章,我希望 ...
- 【原创】CHROME 最小字体限制为12PX的终极解决方案
CHROME 最小字体限制为12PX的终极解决方案 本文由五月雨恋提供,转载请注明出处. 相信不少做网站的用户会有这样一个问题,Chrome 默认最小字体是12px(最新版英文也有此问题),这个是 C ...
- cocos3.2中如何创建一个场景
1.可以将一些比较通用的东西放到Common.h中,这是一个.h文件,必须手动添加,且保证在classes目录里 #ifndef __COMMON_H__ #define __COMMON_H__ # ...
- LintCode-Hash Function
In data structure Hash, hash function is used to convert a string(or any other type) into an integer ...
- android禁止ScrollView自动滚动
当Scrollview嵌套listview,或者子View的内容过多时,当内容加载完成后,ScrollView中内容的长度会发生改变,ScrollView会自动往下滚动,解决办法:在ScollView ...
- MVC3 ModelBinder
1.Model Binder从哪些地方获取数据(找到数据后会停止继续寻找) MVC 框架内置默认的 Model Binder 是 DefaultModelBinder 类.当 Action Invok ...
- Code First 中的 TPH TPT TPC
public class Blog { public int Id { get; set; } public DateTime Creationdate { get; set; } public st ...