mysql图片列表,图片列表 - MVC5+EF6+MySql企业网盘实战 - 爱整理

写在前面

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

实现

因为上传的图片有大有小，为了页面的美观，在上传文件的时候，对图片进行特殊处理，生成对应的缩略图。命名格式为图片的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 <= 0)

{

page = 1;

}

if (userInfo == null)

{

RedirectToAction("Login", "UserInfo");

}

int pageSize = 10;

int recordCount = 0;

var imagesPaged = _myFileServiceRepository.FindPaged(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 lstMyFileViewModel = new List();

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 = 200, total = totalPage }), JsonRequestBehavior = JsonRequestBehavior.AllowGet };

}

}

}

List视图@{

ViewBag.Title = "Lists";

Layout = "~/Views/Shared/_Layout.cshtml";

}

$(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];

$(' ').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);

});

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

图片列表

总结

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