写在前面
实现逻辑是:单击图片节点,加载所有的当前用户之前上传的图片,分页,按时间倒序加载。
实现
因为上传的图片有大有小,为了页面的美观,在上传文件的时候,对图片进行特殊处理,生成对应的缩略图。命名格式为图片的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);
});
结果如下图所示,上传一些测试的图片
图片列表
总结
最近一直在学车,挤出点时间,今天又实现了一个功能。所剩的功能不多了。也有个网盘的样子了。