ASP.NET?MVC實現(xiàn)單個圖片上傳、限制圖片格式與大小并在服務(wù)端裁剪圖片
本篇,在ASP.NET MVC4下實現(xiàn)單個圖片上傳,具體功能包括:
- 1、在客戶端選擇圖片,并限制圖片的大小和格式
- 2、在客戶端上傳圖片,并顯示預(yù)覽圖
- 3、在服務(wù)端限制圖片的大小和格式
- 4、在服務(wù)端保存圖片時,把圖片裁剪成某個固定尺寸
本篇源碼在:https://github.com/darrenji/FileUploadInMVC
實現(xiàn)的大致思路是:
- 客戶端限制圖片大小和格式,通過寫一個jQuery插件來實現(xiàn)
- 服務(wù)端實現(xiàn)圖片裁剪,通過使用ImageSize組件來實現(xiàn)
首先是一個用來承載上傳信息的類:
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中,需要提供一個接收前端上傳文件并返回json格式的Action方法,還需要提供一個根據(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" }; //返回給前臺的結(jié)果,最終以json返回 List<UploadFileResult> results = new List<UploadFileResult>(); //遍歷從前臺傳遞而來的文件 foreach (string file in Request.Files) { //把每個文件轉(zhuǎn)換成HttpPostedFileBase HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase; //如果前臺傳來的文件為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 = "圖片尺寸不能超過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"); //目標文件夾的相對路徑 ImageSize需要的格式 string pathForSaving = Server.MapPath("~/AjaxUpload/"); //目標文件夾的相對路徑 統(tǒng)計文件夾大小需要的格式 string pathForSaving1 = Server.MapPath("~/AjaxUpload"); //在根目錄下創(chuàng)建目標文件夾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 }); } //根據(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ù)相對路徑在項目根路徑下創(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插件來限制上傳圖片的大小和格式,使用FormData對象來接收圖片文件并傳遞給服務(wù)端,客戶端接收到服務(wù)端json數(shù)據(jù)動態(tài)創(chuàng)建表格行把預(yù)覽圖顯示出來。
@{ 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 () { //顯示進度提示 $('#indicator').css("display", "block"); //清空提示內(nèi)容 $('#msg').text(''); if ($('#fn').text().length > 0) { //刪除圖片 deleteImg(); } //上傳文件數(shù)據(jù)準備 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 + "' (狀態(tài): '" + textStatus + "', 錯誤為: '" + 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> }
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
相關(guān)文章
MVC+EasyUI+三層新聞網(wǎng)站建立 主頁布局的方法(五)
這篇文章主要為大家詳細介紹了MVC+EasyUI+三層新聞網(wǎng)站建立的第五篇,教大家如何進行主頁布局,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07限制CheckBoxList控件只能單選實現(xiàn)代碼及演示動畫
開發(fā)要求,原本對CheckBoxList控件是用來讓用戶多選的。但現(xiàn)在特殊要求,這個CheckBoxList控件限制只能單選,很多新手朋友可能不知從何下手,為此本文的出現(xiàn)時有必要的了,有需要的朋友可以了解此文2013-01-01在?.NET?平臺使用?ReflectionDynamicObject?優(yōu)化反射調(diào)用的代碼詳解
這篇文章主要介紹了在?.NET?平臺使用?ReflectionDynamicObject?優(yōu)化反射調(diào)用代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03解析在.net中使用XSLT轉(zhuǎn)換xml文檔的示例詳解
本篇文章是對在.net中使用XSLT轉(zhuǎn)換xml文檔的示例進行了詳細的分析介紹,需要的朋友參考下2013-05-05WPF開發(fā)之利用DrawingVisual繪制高性能曲線圖
通過WPF實現(xiàn)大數(shù)據(jù)曲線圖時,如果用最基礎(chǔ)的Canvas來實現(xiàn),性能堪憂。所以本文將利用DrawingVisual繪制高性能曲線圖,感興趣的可以了解一下2022-02-02ASP.NET MVC使用RazorEngine解析模板生成靜態(tài)頁
這篇文章主要介紹了ASP.NET MVC使用RazorEngine解析模板生成靜態(tài)頁的相關(guān)資料,需要的朋友可以參考下2016-05-05