快捷導航

ASP.NET MVC解決上傳圖片臟數(shù)據(jù)的方法

更新時間：2022年09月11日 12:04:59 作者：Darren Ji

這篇文章介紹了ASP.NET MVC解決上傳圖片臟數(shù)據(jù)的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

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

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

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

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

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

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

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

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

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

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

您可能感興趣的文章: