在"在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" />
    <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，即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);
//清空上傳文件框內容
$("#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"/>

當然，存放上傳圖片的臨時文件夾是可以隨時清理的。

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對的支持。如果你想了解更多相關內容請查看下面相關鏈接