写在前面

实现逻辑是:单击图片节点,加载所有的当前用户之前上传的图片,分页,按时间倒序加载。

系列文章

[EF]vs15+ef6+mysql code first方式

[实战]MVC5+EF6+MySql企业网盘实战(1)

[实战]MVC5+EF6+MySql企业网盘实战(2)——用户注册

[实战]MVC5+EF6+MySql企业网盘实战(3)——验证码

[实战]MVC5+EF6+MySql企业网盘实战(4)——上传头像

[Bootstrap]modal弹出框

[实战]MVC5+EF6+MySql企业网盘实战(5)——登录界面,头像等比例压缩

[实战]MVC5+EF6+MySql企业网盘实战(5)——页面模板

[实战]MVC5+EF6+MySql企业网盘实战(5)——ajax方式注册

[实战]MVC5+EF6+MySql企业网盘实战(6)——ajax方式登录

[实战]MVC5+EF6+MySql企业网盘实战(7)——文件上传

[实战]MVC5+EF6+MySql企业网盘实战(8)——文件下载、删除

[实战]MVC5+EF6+MySql企业网盘实战(9)——编辑文件名

[实战]MVC5+EF6+MySql企业网盘实战(10)——新建文件夹

[实战]MVC5+EF6+MySql企业网盘实战(11)——新建文件夹2

[实战]MVC5+EF6+MySql企业网盘实战(12)——新建文件夹和上传文件

[实战]MVC5+EF6+MySql企业网盘实战(13)——编辑文件夹

[实战]MVC5+EF6+MySql企业网盘实战(14)——逻辑重构

[实战]MVC5+EF6+MySql企业网盘实战(14)——思考

[实战]MVC5+EF6+MySql企业网盘实战(15)——逻辑重构2

[实战]MVC5+EF6+MySql企业网盘实战(16)——逻辑重构3

[实战]MVC5+EF6+MySql企业网盘实战(17)——思考2

[实战]MVC5+EF6+MySql企业网盘实战(18)——文件上传,下载,修改

[实战]MVC5+EF6+MySql企业网盘实战(19)——BJUI和ztree

[实战]MVC5+EF6+MySql企业网盘实战(20)——Bootstrap Paginator

[实战]MVC5+EF6+MySql企业网盘实战(21)——网盘操作日志

[实战]MVC5+EF6+MySql企业网盘实战(22)——图片列表

实现

因为上传的图片有大有小,为了页面的美观,在上传文件的时候,对图片进行特殊处理,生成对应的缩略图。命名格式为图片的md5+“_thumbnail”+图片的扩展名。

ImagesController为

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;
using Wolfy.NetDisk.BLL;
using Wolfy.NetDisk.IBLL;
using Wolfy.NetDisk.Model;
using Wolfy.NetDisk.Site.Models; namespace Wolfy.NetDisk.Site.Controllers
{
public class ImagesController : Controller
{
private IMyFileServiceRepository _myFileServiceRepository = new MyFileServiceRepository(); private ILogServiceRepository _logServiceRepository = new LogServiceRepository();
private IFileTypeServiceRepository fileTypeServiceRepository = new FileTypeServiceRepository();
//
// GET: /Images/
public ActionResult Lists()
{
UserInfo user = Session["user"] as UserInfo;
if (user == null)
{
return RedirectToAction("Login", "UserInfo");
}
return View();
}
[HttpGet]
public JsonResult GetImages()
{
UserInfo userInfo = Session["user"] as UserInfo;
int page = Convert.ToInt32(Request.Params["page"]);
if (page <= )
{
page = ;
}
if (userInfo == null)
{
RedirectToAction("Login", "UserInfo");
}
int pageSize = ;
int recordCount = ;
var imagesPaged = _myFileServiceRepository.FindPaged<DateTime>(page, pageSize, out recordCount, x => x.User.Id == userInfo.Id && x.IsDelete == false && x.FileIcon.Contains("ImgType.png"), false, x => x.CreateDt);
int totalPage = Convert.ToInt32(Math.Ceiling(recordCount * 1.0 / pageSize));
List<MyFileViewModel> lstMyFileViewModel = new List<MyFileViewModel>();
foreach (var item in imagesPaged)
{
lstMyFileViewModel.Add(new MyFileViewModel()
{
Id = item.Id,
FileIcon = item.FileIcon,
FileServerUrl = "/NetDisk/" + item.FileMd5 + item.FileExt,
Name = item.Name,
FileThumnailUrl = "/NetDisk/" + item.FileMd5 + "_thumbnail" + item.FileExt
});
}
return new JsonResult() { Data = new JavaScriptSerializer().Serialize(new { _data = lstMyFileViewModel, _code = , total = totalPage }), JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
}

List视图

@{
ViewBag.Title = "Lists";
Layout = "~/Views/Shared/_Layout.cshtml";
} <script> $(function () {
var imgElement = $('#imgpage');
var options = {
size: "large",
bootstrapMajorVersion: 3,
//当前页
currentPage: 1,
//可以改变显示的页码数
numberOfPages: 5,
//总页数
totalPages: 5
};
function requestServer(pageIndex) {
$.getJSON('/Images/GetImages?page=' + pageIndex, function (data) {
console.log(data);
data = JSON.parse(data);
if (data.total <= pageIndex) {
options.totalPages = pageIndex;
} else {
options.totalPages = data.total;
}; $('#dvimg').html('');
for (var i = 0; i < data._data.length; i++) {
var current = data._data[i];
$(' <img style="margin-left:10px;" data-id="' + current.Id + '" src="' + current.FileThumnailUrl + '" alt="' + current.Name + '" title="' + current.Name + '"/>').appendTo($('#dvimg')); };
imgElement.bootstrapPaginator(options); });
};
function loadData(pageIndex) { options.onPageClicked = function (e, originalEvent, type, page) {
//页码单击事件
console.log(page);
options.currentPage = page; requestServer(page); };
requestServer(pageIndex);
imgElement.bootstrapPaginator(options); }; loadData(1);
});
</script>
<div class="tableContent" style="width:95%;" id="dvimg"> </div>
<div style="width:95%;position:relative;margin-top:10px">
<ul id='imgpage' class="bjui-pageFooter" style="margin:0 auto; margin-left:30%;"></ul>
</div>

结果如下图所示,上传一些测试的图片

图片列表

总结

最近一直在学车,挤出点时间,今天又实现了一个功能。所剩的功能不多了。也有个网盘的样子了。

[实战]MVC5+EF6+MySql企业网盘实战(22)——图片列表的更多相关文章

  1. [实战]MVC5+EF6+MySql企业网盘实战(28)——其他列表

    写在前面 本篇文章将实现,其他文件类型的列表. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) [实战]MVC5+EF ...

  2. [实战]MVC5+EF6+MySql企业网盘实战(27)——应用列表

    写在前面 本篇文章将实现应用列表,同样和其他列表的不同之处,在于查询条件的不同. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘 ...

  3. [实战]MVC5+EF6+MySql企业网盘实战(26)——音乐列表

    写在前面 本篇文章将实现,音乐列表,同样和其他列表的不同之处,在于查询条件的不同. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网 ...

  4. [实战]MVC5+EF6+MySql企业网盘实战(25)——种子列表

    写在前面 上篇文章实现了视频列表,本篇文章继续实现其他的文件列表.功能相似.这里就不再赘述. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MyS ...

  5. [实战]MVC5+EF6+MySql企业网盘实战(24)——视频列表

    写在前面 上篇文章实现了文档列表,所以实现视频列表就依葫芦画瓢就行了. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) ...

  6. [实战]MVC5+EF6+MySql企业网盘实战(23)——文档列表

    写在前面 上篇文章实现了图片列表,这篇文章实现文档列表将轻车熟路,因为逻辑基本相似,只是查询条件的不同.这里将txt,doc,docx,ppt,pptx,xls,xlsx的文件都归为文档列表中. 系列 ...

  7. [实战]MVC5+EF6+MySql企业网盘实战(4)——上传头像

    写在前面 最近又开始忙了,工期紧比较赶,另外明天又要去驾校,只能一个功能一个功能的添加了,也许每次完成的功能确实不算什么,等将功能都实现了,然后在找一个好点的ui对前端重构一下. 系列文章 [EF]v ...

  8. [实战]MVC5+EF6+MySql企业网盘实战(2)——验证码

    写在前面 断断续续,今天算是把验证码的东东弄出来了. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) [实战]MVC5 ...

  9. [实战]MVC5+EF6+MySql企业网盘实战(2)——用户注册

    写在前面 上篇文章简单介绍了项目的结构,这篇文章将实现用户的注册.当然关于漂亮的ui,这在追后再去添加了,先将功能实现.也许代码中有不合适的地方,也只有在之后慢慢去优化了. 系列文章 [EF]vs15 ...

随机推荐

  1. Spring Swagger URL传参问题(转)

    代码例子: @ApiOperation(value="获取用户详细信息", notes="根据url的id来获取用户详细信息") @ApiImplicitPar ...

  2. 随机抽样一致性算法(RANSAC)转载

    这两天看<计算机视觉中的多视图几何>人都看蒙了,转载一些干货看看 转自王先荣 http://www.cnblogs.com/xrwang/archive/2011/03/09/ransac ...

  3. array_uintersect、array_uintersect_assoc、array_uintersect_uassoc 的使用方法

    和 array_intersect 类似,只不过 array_uintersect* 系列函数的值比较使用自定义函数: 键的比较,array_uintersect.array_uintersect_a ...

  4. varchar字段

    varchar  最长26000多,实际使用最好不要超过255,会占内存 可以考虑text

  5. 修改Tomcat端口

    1.自己的tomcat修改端口号,在tomcat解压缩目录中conf目录下又一个server.xml,将HTTP协议的端口修改为自己想要的即可 <Connector port="808 ...

  6. codeforces 872E. Points, Lines and Ready-made Titles

    http://codeforces.com/contest/872/problem/E E. Points, Lines and Ready-made Titles time limit per te ...

  7. NOIP 2014 提高组 Day1

    期望得分:100+100+50=250 实际得分:100+100+50=250 此次NOIP  ZJ省一分数线:500,SD:345 https://www.luogu.org/problem/lis ...

  8. POJ3061 Subsequence 尺取or二分

    Description A sequence of N positive integers (10 < N < 100 000), each of them less than or eq ...

  9. Bzoj2300 / 洛谷P2521 [HAOI2011]防线修建

    题目描述 近来A国和B国的矛盾激化,为了预防不测,A国准备修建一条长长的防线,当然修建防线的话,肯定要把需要保护的城市修在防线内部了.可是A国上层现在还犹豫不决,到底该把哪些城市作为保护对象呢?又由于 ...

  10. C语言易错点

    C语言易错点 1.每个C语言程序中main函数是有且只有一个的. 2.算法可以没有输入,但必须要有输出. 3.在函数中不可以再定义函数. 4.break可用于循环结构和switch语句. 5.brea ...