using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ImageResizer;
using MvcApplication10.Models;
namespace MvcApplication10.Controllers
public class HomeController : Controller
public ActionResult Index()
return View();
//接收上传图片
[HttpPost]
public ActionResult UploadFile()
//允许的图片格式
var allowedExtensions = new[] { ".png", ".gif", ".jpg", ".jpeg" };
//返回给前台的结果，最终以json返回
List<UploadFileResult> results = new List<UploadFileResult>();
//遍历从前台传递而来的文件
foreach (string file in Request.Files)
//把每个文件转换成HttpPostedFileBase
HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
//如果前台传来的文件为null，继续遍历其它文件
if (hpf.ContentLength == 0 || hpf == null)
continue;
if (hpf.ContentLength > 1024*1024) //如果大于规定最大尺寸
results.Add(new UploadFileResult()
FileName = "",
FilePath = "",
IsValid = false,
Length = hpf.ContentLength,
Message = "图片尺寸不能超过1024KB",
Type = hpf.ContentType
var extension = Path.GetExtension(hpf.FileName);
if (!allowedExtensions.Contains(extension))//如果文件的后缀名不包含在规定的后缀数组中
results.Add(new UploadFileResult()
FileName = "",
FilePath = "",
IsValid = false,
Length = hpf.ContentLength,
Message = "图片格式必须是png、gif、jpg或jpeg",
Type = hpf.ContentType
//给上传文件改名
string date = DateTime.Now.ToString("yyyyMMddhhmmss");
//目标文件夹的相对路径 ImageSize需要的格式
string pathForSaving = Server.MapPath("~/AjaxUpload/");
//目标文件夹的相对路径 统计文件夹大小需要的格式
string pathForSaving1 = Server.MapPath("~/AjaxUpload");
//在根目录下创建目标文件夹AjaxUpload
if (this.CreateFolderIfNeeded(pathForSaving))
//保存小图
var versions = new Dictionary<string, string>();
versions.Add("_small", "maxwidth=400&maxheight=250&format=jpg");
//versions.Add("_medium", "maxwidth=200&maxheight=200&format=jpg");
//versions.Add("_large", "maxwidth=600&maxheight=600&format=jpg");
//保存各个版本的缩略图
foreach (var key in versions.Keys)
hpf.InputStream.Seek(0, SeekOrigin.Begin);
ImageBuilder.Current.Build(new ImageJob(
hpf.InputStream,
pathForSaving + date + key, //不带后缀名的图片名称
new Instructions(versions[key]),
false,//是否保留原图
true));//是否增加后缀
results.Add(new UploadFileResult()
FileName = date + "_small" + ".jpg",
FilePath = Url.Content(String.Format("~/AjaxUpload/{0}", date + "_small" + ".jpg")),
IsValid = true,
Length = hpf.ContentLength,
Message = "上传成功",
Type = hpf.ContentType
return Json(new
filename = results[0].FileName,
filepath=results[0].FilePath,
isvalid=results[0].IsValid,
length=results[0].Length,
message=results[0].Message,
type=results[0].Type
//根据文件名删除文件
[HttpPost]
public ActionResult DeleteFileByName(string smallname)
string pathForSaving = Server.MapPath("~/AjaxUpload");
System.IO.File.Delete(Path.Combine(pathForSaving, smallname));
return Json(new
msg = true
//根据相对路径在项目根路径下创建文件夹
private bool CreateFolderIfNeeded(string path)
bool result = true;
if (!Directory.Exists(path))
Directory.CreateDirectory(path);
catch (Exception)
result = false;
return result;
在Home/Index.cshtml中，使用checkFileTypeAndSize.js插件来限制上传图片的大小和格式，使用FormData对象来接收图片文件并传递给服务端，客户端接收到服务端json数据动态创建表格行把预览图显示出来。
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
<style type="text/css">
#msg {
color: red;
</style>
<form id="file_upload_form" method="post" enctype="multipart/form-data" action="">
<input name="file" id="file" size="27" type="file" />
<img src="~/images/ajax-loader.gif" id="indicator" style="display: none;" />
<div id="imgArea">
<table id="tbl">
<tbody>
</tbody>
</table>
<span id="msg"></span>
</form>
@section scripts
<script src="~/Scripts/checkFileTypeAndSize.js"></script>
<script type="text/javascript">
$(function() {
$("#file").checkFileTypeAndSize({
allowedExtensions: ['jpg','jpeg','gif','png'],
maxSize: 1024, //最大允许1024KB，即1MB
success: function () {
//显示进度提示
$('#indicator').css("display", "block");
//清空提示内容
$('#msg').text('');
if ($('#fn').text().length > 0) {
//删除图片
deleteImg();
//上传文件数据准备
var fd = new FormData();
fd.append('image', $('#file')[0].files[0]);
$.ajax({
url: '@Url.Action("UploadFile","Home")',
type: "POST",
data: fd,
contentType: false,
cache: false,
processData: false,
dataType: 'json',
success: function (data) {
//隐藏进度提示
$('#indicator').css("display", "none");
if (data.isvalid) {
//$('#fileTemplate').tmpl(data).appendTo('#imgArea');
createTableTr();
$('#thumb').attr('src', data.filepath);
$('#fn').text(data.filename);
} else {
$('#msg').text(data.message);
extensionerror: function () {
//alert('允许的格式为：jpg,jpeg,gif,png');
$('#msg').text('允许的格式为：jpg,jpeg,gif,png');
return;
sizeerror: function () {
//alert('最大尺寸1024KB,即1MB');
$('#msg').text('最大尺寸1024KB,即1MB');
return;
//删除图片
function deleteImg() {
$.ajax({
cache: false,
url: '@Url.Action("DeleteFileByName", "Home")',
type: "POST",
data: { smallname: $('#fn').text() },
success: function (data) {
if (data.msg) {
$('#fn').parent().parent().remove();
error: function (jqXhr, textStatus, errorThrown) {
alert("出错了 '" + jqXhr.status + "' (状态: '" + textStatus + "', 错误为: '" + errorThrown + "')");
//创建表格
function createTableTr() {
var table = $('#tbl');
table.append("<tr><td><img id='thumb' /></td><td colspan='2'><span id='fn'></span></td></tr>");
</script>
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接
您可能感兴趣的文章:
ASP.NET Core通用主机实现托管服务 2022-07-07 ASP.NET MVC实现多选下拉框保存并显示 2022-08-08 ASP.NET MVC项目实现三级联动无刷新 2022-07-07 ASP.NET堆和栈三之引用类型对象拷贝和内存分配 2022-08-08 使用EF Code First搭建简易ASP.NET&n 2022-08-08 ASP.NET MVC实现横向展示购物车 2022-08-08 ASP.NET MVC获取多级类别组合下的产品 2022-08-08 ASP.NET MVC使用正则表达式验证手机号码 2022-08-08 美国设下计谋,用娘炮文化重塑日本,已影响至中国 2021-11-19 时空伴随者是什么意思?时空伴随者介绍 2021-11-09 工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终 2021-11-05 2022年放假安排出炉：五一连休5天 2022年所有节日一览表 2021-10-26 电脑版 - 返回首页
2006-2023 脚本之家 JB51.Net , All Rights Reserved.
