在"在ASP.NET MVC下實(shí)現(xiàn)單個圖片上傳, 客戶端服務(wù)端雙重限制圖片大小和格式, 服務(wù)端裁剪圖片"中，已經(jīng)實(shí)現(xiàn)了在客戶端和服務(wù)端限制圖片大小和格式，以及在服務(wù)端裁剪圖片。但還有一個重要的話題是需要面對的，那就是圖片臟數(shù)據(jù)問題。

假設(shè)用戶添加產(chǎn)品信息，并且上傳了圖片，可之后用戶沒有點(diǎn)擊頁面上的添加按鈕，這就導(dǎo)致上傳圖片成為"臟數(shù)據(jù)"，存在著卻一直不會被使用。解決這個問題的大致思路是：

• 在上傳圖片的時候，把圖片保存到一個臨時文件夾，或者叫緩存文件夾
• 當(dāng)用戶真正保存的時候，再把臨時文件夾的圖片拷貝到最終目標(biāo)文件夾

假設(shè)，有這樣的一個Model，它的ImageUrl屬性，用來存放圖片真正的相對路徑。

    public class ImgVm
    {
[Required(ErrorMessage = "必填")]
public string ImageUrl { get; set; }
    }

在HomeController中，存在如下的一些Action:

• 提供一個顯示上傳頁面的Action，并且是ImgVm類型的強(qiáng)類型視圖，ImgVm的ImageUrl屬性用來存放上傳圖片的相對路徑
• 提供一個接收ImgVm類型的Action,把臨時文件夾內(nèi)的圖片復(fù)制到目標(biāo)文件夾內(nèi)，并且給ImgVm的ImageUrl屬性賦上新的圖片相對路徑

public ActionResult Index()
{
    return View(new ImgVm());
}
[HttpPost]
public ActionResult Index(ImgVm imgVm)
{
    if (ModelState.IsValid)
    {
//目標(biāo)文件夾路徑
string pathForRealSaving = Server.MapPath("~/RealUpload/");
//目標(biāo)文件夾內(nèi)的用戶文件夾路徑
string pathForRealUserSaving = Server.MapPath("~/RealUpload/User001/");
//當(dāng)前文件路徑
string existingFilePath = Server.MapPath(imgVm.ImageUrl);
//當(dāng)前文件名,根據(jù)文件路徑獲得
string existingFileName = Path.GetFileName(existingFilePath);
if (CreateFolderIfNeeded(pathForRealSaving))
{
    if (CreateFolderIfNeeded(pathForRealUserSaving))
    {
//根據(jù)當(dāng)前文件路徑獲取當(dāng)前文件
var existingfile = Path.GetFullPath(existingFilePath);
//獲取目標(biāo)文件夾內(nèi)的目標(biāo)文件
var realfile = Path.Combine(pathForRealUserSaving, existingFileName);
//把臨時文件內(nèi)的圖片復(fù)制到目標(biāo)文件夾內(nèi)
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 () {
    //顯示進(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);
//清空上傳文件框內(nèi)容
$("#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 + "" (狀態(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>
}

還有一個Home/showimg.cshtml視圖，用來顯示新的(相對臨時文件夾中的那張圖片)圖片。

@model MvcApplication10.Models.ImgVm
@{
    ViewBag.Title = "showimg";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>showimg</h2>
<img src="@Model.ImageUrl"/>

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

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