在"在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片"中，已经实现了在客户端和服务端限制图片大小和格式，以及在服务端裁剪图片。但还有一个重要的话题是需要面对的，那就是图片脏数据问题。
假设用户添加产品信息，并且上传了图片，可之后用户没有点击页面上的添加按钮，这就导致上传图片成为"脏数据"，存在着却一直不会被使用。解决这个问题的大致思路是：
○ 在上传图片的时候，把图片保存到一个临时文件夹，或者叫缓存文件夹
○ 当用户真正保存的时候，再把临时文件夹的图片拷贝到最终目标文件夹
假设，有这样的一个Model，它的ImageUrl属性，用来存放图片真正的相对路径。
public class ImgVm{[Required(ErrorMessage = "必填")]public string ImageUrl { get; set; }}
在HomeController中，存在如下的一些Action:
○ 提供一个显示上传页面的Action，并且是ImgVm类型的强类型视图，ImgVm的ImageUrl属性用来存放上传图片的相对路径
○ 提供一个接收ImgVm类型的Action,把临时文件夹内的图片复制到目标文件夹内，并且给ImgVm的ImageUrl属性赋上新的图片相对路径
public ActionResult Index(){return View(new ImgVm());}[HttpPost]public ActionResult Index(ImgVm imgVm){if (ModelState.IsValid){//目标文件夹路径string pathForRealSaving = Server.MapPath("~/RealUpload/");//目标文件夹内的用户文件夹路径string pathForRealUserSaving = Server.MapPath("~/RealUpload/User001/");//当前文件路径string existingFilePath = Server.MapPath(imgVm.ImageUrl);//当前文件名,根据文件路径获得string existingFileName = Path.GetFileName(existingFilePath);if (CreateFolderIfNeeded(pathForRealSaving)){if (CreateFolderIfNeeded(pathForRealUserSaving)){//根据当前文件路径获取当前文件var existingfile = Path.GetFullPath(existingFilePath);//获取目标文件夹内的目标文件var realfile = Path.Combine(pathForRealUserSaving, existingFileName);//把临时文件内的图片复制到目标文件夹内System.IO.File.Copy(existingfile, realfile, true);//保存新的图片相对路径imgVm.ImageUrl = "RealUpload/User001/" + existingFileName;}}return View("showimg", imgVm);}else{return Index(imgVm);}}
Home/Index.cshtml中多了在上传图片成功后给id为ImageUrl隐藏域赋值的部分。
@model MvcApplication10.Models.ImgVm@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml";}<style type="text/css">#msg {color: red;}</style>@using (Html.BeginForm("Index", "Home", FormMethod.Post, new {id = "addForm", @class = "form-horizontal"})){<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><div>@Html.HiddenFor(m => m.ImageUrl)<input type="submit" value="提交"/></div>}@section scripts{<script src="~/Scripts/checkFileTypeAndSize.js"></script><script type="text/javascript">$(function() {$("#file").checkFileTypeAndSize({allowedExtensions: [‘jpg‘,‘jpeg‘,‘gif‘,‘png‘],maxSize: 1024, //最大允许1024KB，即1MBsuccess: 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);//清空上传文件框内容$(‘#file‘).val(‘‘);//给隐藏域赋值$(‘#ImageUrl‘).val(data.filepath);} 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>}
还有一个Home/showimg.cshtml视图，用来显示新的(相对临时文件夹中的那张图片)图片。
@model MvcApplication10.Models.ImgVm@{ViewBag.Title = "showimg";Layout = "~/Views/Shared/_Layout.cshtml";}<h2>showimg</h2><img src="@Model.ImageUrl"/>
当然，存放上传图片的临时文件夹是可以随时清理的。
时间： 2024-10-03 22:41:56