ASP.NET?MVC實(shí)現(xiàn)單個(gè)圖片上傳、限制圖片格式與大小并在服務(wù)端裁剪圖片
本篇,在ASP.NET MVC4下實(shí)現(xiàn)單個(gè)圖片上傳,具體功能包括:
- 1、在客戶端選擇圖片,并限制圖片的大小和格式
- 2、在客戶端上傳圖片,并顯示預(yù)覽圖
- 3、在服務(wù)端限制圖片的大小和格式
- 4、在服務(wù)端保存圖片時(shí),把圖片裁剪成某個(gè)固定尺寸
本篇源碼在:https://github.com/darrenji/FileUploadInMVC

實(shí)現(xiàn)的大致思路是:
- 客戶端限制圖片大小和格式,通過(guò)寫一個(gè)jQuery插件來(lái)實(shí)現(xiàn)
- 服務(wù)端實(shí)現(xiàn)圖片裁剪,通過(guò)使用ImageSize組件來(lái)實(shí)現(xiàn)
首先是一個(gè)用來(lái)承載上傳信息的類:
public class UploadFileResult
{
//帶后綴的名稱,比如xxx.jpg
public string FileName { get; set; }
//圖片的字節(jié)數(shù)
public int Length { get; set; }
//圖片的類型:image/jpeg
public string Type { get; set; }
public bool IsValid { get; set; }
public string Message { get; set; }
//圖片的完整路徑:~/AjaxUpload/20141112_large.jpg
public string FilePath { get; set; }
}在HomeController中,需要提供一個(gè)接收前端上傳文件并返回json格式的Action方法,還需要提供一個(gè)根據(jù)文件名刪除圖片的Action方法。
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" };
//返回給前臺(tái)的結(jié)果,最終以json返回
List<UploadFileResult> results = new List<UploadFileResult>();
//遍歷從前臺(tái)傳遞而來(lái)的文件
foreach (string file in Request.Files)
{
//把每個(gè)文件轉(zhuǎn)換成HttpPostedFileBase
HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
//如果前臺(tái)傳來(lái)的文件為null,繼續(xù)遍歷其它文件
if (hpf.ContentLength == 0 || hpf == null)
{
continue;
}
else
{
if (hpf.ContentLength > 1024*1024) //如果大于規(guī)定最大尺寸
{
results.Add(new UploadFileResult()
{
FileName = "",
FilePath = "",
IsValid = false,
Length = hpf.ContentLength,
Message = "圖片尺寸不能超過(guò)1024KB",
Type = hpf.ContentType
});
}
else
{
var extension = Path.GetExtension(hpf.FileName);
if (!allowedExtensions.Contains(extension))//如果文件的后綴名不包含在規(guī)定的后綴數(shù)組中
{
results.Add(new UploadFileResult()
{
FileName = "",
FilePath = "",
IsValid = false,
Length = hpf.ContentLength,
Message = "圖片格式必須是png、gif、jpg或jpeg",
Type = hpf.ContentType
});
}
else
{
//給上傳文件改名
string date = DateTime.Now.ToString("yyyyMMddhhmmss");
//目標(biāo)文件夾的相對(duì)路徑 ImageSize需要的格式
string pathForSaving = Server.MapPath("~/AjaxUpload/");
//目標(biāo)文件夾的相對(duì)路徑 統(tǒng)計(jì)文件夾大小需要的格式
string pathForSaving1 = Server.MapPath("~/AjaxUpload");
//在根目錄下創(chuàng)建目標(biāo)文件夾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");
//保存各個(gè)版本的縮略圖
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
});
}
//根據(jù)文件名刪除文件
[HttpPost]
public ActionResult DeleteFileByName(string smallname)
{
string pathForSaving = Server.MapPath("~/AjaxUpload");
System.IO.File.Delete(Path.Combine(pathForSaving, smallname));
return Json(new
{
msg = true
});
}
//根據(jù)相對(duì)路徑在項(xiàng)目根路徑下創(chuàng)建文件夾
private bool CreateFolderIfNeeded(string path)
{
bool result = true;
if (!Directory.Exists(path))
{
try
{
Directory.CreateDirectory(path);
}
catch (Exception)
{
result = false;
}
}
return result;
}
}
}在Home/Index.cshtml中,使用checkFileTypeAndSize.js插件來(lái)限制上傳圖片的大小和格式,使用FormData對(duì)象來(lái)接收?qǐng)D片文件并傳遞給服務(wù)端,客戶端接收到服務(wù)端json數(shù)據(jù)動(dòng)態(tài)創(chuàng)建表格行把預(yù)覽圖顯示出來(lái)。
@{
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;" />
<br />
<div id="imgArea">
<table id="tbl">
<tbody>
</tbody>
</table>
</div>
<div>
<span id="msg"></span>
</div>
</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 () {
//顯示進(jìn)度提示
$('#indicator').css("display", "block");
//清空提示內(nèi)容
$('#msg').text('');
if ($('#fn').text().length > 0) {
//刪除圖片
deleteImg();
}
//上傳文件數(shù)據(jù)準(zhǔn)備
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) {
//隱藏進(jìn)度提示
$('#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("出錯(cuò)了 '" + jqXhr.status + "' (狀態(tài): '" + textStatus + "', 錯(cuò)誤為: '" + errorThrown + "')");
}
});
}
//創(chuàng)建表格
function createTableTr() {
var table = $('#tbl');
table.append("<tr><td><img id='thumb' /></td><td colspan='2'><span id='fn'></span></td></tr>");
}
</script>
}以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
相關(guān)文章
MVC+EasyUI+三層新聞網(wǎng)站建立 主頁(yè)布局的方法(五)
這篇文章主要為大家詳細(xì)介紹了MVC+EasyUI+三層新聞網(wǎng)站建立的第五篇,教大家如何進(jìn)行主頁(yè)布局,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
JQuery運(yùn)用ajax注冊(cè)用戶實(shí)例(后臺(tái)asp.net)
JQuery運(yùn)用ajax注冊(cè)用戶實(shí)例,其實(shí)那中后臺(tái)語(yǔ)言都是差不多的形式。2009-12-12
限制CheckBoxList控件只能單選實(shí)現(xiàn)代碼及演示動(dòng)畫
開發(fā)要求,原本對(duì)CheckBoxList控件是用來(lái)讓用戶多選的。但現(xiàn)在特殊要求,這個(gè)CheckBoxList控件限制只能單選,很多新手朋友可能不知從何下手,為此本文的出現(xiàn)時(shí)有必要的了,有需要的朋友可以了解此文2013-01-01
在?.NET?平臺(tái)使用?ReflectionDynamicObject?優(yōu)化反射調(diào)用的代碼詳解
這篇文章主要介紹了在?.NET?平臺(tái)使用?ReflectionDynamicObject?優(yōu)化反射調(diào)用代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03
解析在.net中使用XSLT轉(zhuǎn)換xml文檔的示例詳解
本篇文章是對(duì)在.net中使用XSLT轉(zhuǎn)換xml文檔的示例進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-05-05
WPF開發(fā)之利用DrawingVisual繪制高性能曲線圖
通過(guò)WPF實(shí)現(xiàn)大數(shù)據(jù)曲線圖時(shí),如果用最基礎(chǔ)的Canvas來(lái)實(shí)現(xiàn),性能堪憂。所以本文將利用DrawingVisual繪制高性能曲線圖,感興趣的可以了解一下2022-02-02
ASP.NET MVC使用RazorEngine解析模板生成靜態(tài)頁(yè)
這篇文章主要介紹了ASP.NET MVC使用RazorEngine解析模板生成靜態(tài)頁(yè)的相關(guān)資料,需要的朋友可以參考下2016-05-05

