带有 Jasny Bootstrap 的 Asp.Net MVC 4 中的 HttpPostedFileBase，现有图像保存到 S3答案

【问题标题】：HttpPostedFileBase in Asp.Net MVC 4 with Jasny Bootstrap with existing image saved to S3带有 Jasny Bootstrap 的 Asp.Net MVC 4 中的 HttpPostedFileBase，现有图像保存到 S3
【发布时间】：2014-04-16 23:12:19
【问题描述】：

我需要知道是否已在 Jasny Bootstrap 中删除了图像。我的保存和删除代码效果很好。问题是知道何时未设置图像，因为文件上传图像仅在存在时才转换为 HttpPostedFileBase。

类：

    [NotMapped]
    public HttpPostedFileBase Image { get; set; }

编辑视图：

@using (Html.BeginForm("Edit", "MyObject", FormMethod.Post, new { enctype = "multipart/form-data" })) {
    <div class="field">
        <div class="fileinput @imageClass" data-provides="fileinput" data-name="Image">
        <div class="fileinput-new thumbnail" style="width: 150px; height: 150px;">
        <img src="@MyNamespace.Components.S3Utility.DefaultImageUrl">
     </div>
     <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 350px; max-height: 350px;">
         <img src="@imageUrl">
     </div>
     <div>
         <span class="btn btn-default btn-file">
             <span class="fileinput-new">Select image</span>
             <span class="fileinput-exists">Change</span>
             <input type="file" name="Image">
         </span>
         <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
    </div>
}

保存代码：

if (data.Image == null) {
    S3Utility.Delete(myObject.Id);
} else {
    S3Utility.Upload(data.Image, myObject.Id);
}

所有这些都可以正常工作。如果有正确的图像，它甚至会加载图像（@imageUrl，我正在设置）。

问题是'Image' HttpPostedFileBase 在更新时总是为空。

有什么方法可以让我知道图像是否已被删除或设置？在 Jasny 中设置/删除图像时是否会更新该值？

我看到了这个帖子

http://www.jasny.net/articles/jasny-bootstrap-file-upload-with-existing-file/

但它没有转换为 Asp.Net MVC 4 和 HttpPostedFileBase。

【问题讨论】：

标签： c# twitter-bootstrap asp.net-mvc-4 razor jasny-bootstrap

【解决方案1】：

好的，所以答案很简单。在对象中我添加了另一个属性

[NotMapped]
public bool ExistingImage { get; set; }

在我的编辑视图中，我为 ExistingImage 添加了一个隐藏字段仅当图像确实存在时

编辑视图：

@using (Html.BeginForm("Edit", "MyObject", FormMethod.Post, new { enctype = "multipart/form-data" })) {
    <div class="field">
        <div class="fileinput @imageClass" data-provides="fileinput" data-name="Image">
        <div class="fileinput-new thumbnail" style="width: 150px; height: 150px;">
        <img src="@MyNamespace.Components.S3Utility.DefaultImageUrl">
     </div>
     <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 350px; max-height: 350px;">
         <img src="@imageUrl">
         // THIS IS THE NEW CODE FOR CHECKING EXISTING IMAGE
         @if (existingImage) {
             <input type="hidden" name="ExistingImage" value="true" />
         }
         // END NEW CODE
     </div>
     <div>
         <span class="btn btn-default btn-file">
             <span class="fileinput-new">Select image</span>
             <span class="fileinput-exists">Change</span>
             <input type="file" name="Image">
         </span>
         <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
    </div>
}

然后在保存中我只是检查它是否是现有图像：

if (!data.ExistingImage) {
    if (data.Image == null) {
        S3Utility.Delete(myObject.Id);
    } else {
        S3Utility.Upload(data.Image, myObject.Id);
    }
}

我的问题是不了解 .fileinput-exists 部分的工作原理。当您删除或更新图像时，它实际上会删除该部分中的所有内容。因此，如果在 Jasny 中调用了 remove 或 update get，ExistingImage 将默认为 false。那时我只是检查 Image 是否为空（已删除或不存在）或是否存在（已更新）。如果图像不存在，这确实会调用 S3 的额外删除，但这没什么大不了的（出于我的目的）。

【讨论】：