HttpPostedFileBase在Asp.NetMVC 4中，带有Jasny Bootstrap，现有图像保存到S3

本文关键字：图像 保存 S3 Bootstrap 带有 Asp NetMVC HttpPostedFileBase Jasny | 更新日期: 2023-09-27 17:58:45

我需要知道Jasny Bootstrap中是否删除了图像。我的保存和删除代码非常有效。问题是知道什么时候没有设置镜像bc文件上传镜像只在存在HttpPostedFileBase时转换为HttpPostedFileNase。

类别：

    [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在更新时始终为null。

有没有办法让我知道图像是被删除还是被设置了？在Jasny中设置/删除图像时，是否更新了该值？

我看到这篇文章

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

但是它没有被翻译成Asp.NetMVC4和HttpPostedFileBase。

HttpPostedFileBase在Asp.NetMVC 4中，带有Jasny Bootstrap，现有图像保存到S3

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

[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);
    }
}

我的问题是不理解.fileinputexists部分是如何工作的。当您删除或更新图像时，它实际上会删除该部分中的所有内容。因此，如果在Jasny中调用remove或update-get，ExistingImage将默认为false。在这一点上，我只是检查图像是否为空（已删除或不存在）或是否存在（已更新）。如果图像不存在，这确实会对S3进行额外的删除，但这并不是什么大不了的（就我而言）。

相关文章：