Question

我在使用ASP.NET MVC上传之前，正在使用文件API在客户端预览配置文件图像。但是，问题是在发布操作后图像预览会丢失，并且在出现验证错误时会返回默认图像。

如果存在验证错误，我想保留以前的图像预览以及验证错误消息。怎么可以这样做？

问题：
问题是由于验证后清除输入文件类型的原因。因此，文件api无法重新填充图像，因为验证后实际上不存在文件。那么，我想这个问题可以简化为如何在验证后保留输入类型=文件值？

Answer 1

你需要做一些事情：

更改模型，使其具有两个新属性：

ChangeImage：这应该绑定到允许用户提供新图像的复选框
ImagePresent：这表示用户之前（在之前的POST中）已经发布了一张图片

以这种方式更改控制器的操作：

当用户第一次获取表单时，ChangeImage应为true，以便用户可以选择新文件，ImagePresent应为false，以便Razor模板知道服务器上没有要显示给用户的图像
当用户发帖时：
- 如果他检查ChangeImage并提供文件图像，请将其保存在服务器上，例如保存在文件上，以便以后可以向用户显示。如果存在验证错误，请向用户返回包含值ChangeImage = false和ImagePresent = true
- 如果他没有提供图片，并且上一篇文章中有图片，请将ImagePresent设置为true，将ChangeImage设置为false。这样，它将使用剃刀模板显示。
- 如果您需要，可以通过标记ChangeImage并选择无文件或在视图模型中使用新的RemoveImage属性来允许用户删除图像

更改剃刀模板： *为ChangeImage添加一个复选框，以便允许用户指定新的图像文件（或指定一个空文件来删除它）。理想情况下，您应该添加一些JavaScript代码来显示/隐藏文件输入控件。如果用户想要添加图像，则必须检查ChangeImage并选择新文件 *可选地，为RemoveImage添加一个复选框，仅在ImagePresent为真时显示 *添加<img>，仅在ImagePresent为真时显示

如果您这样做，则用户必须仅在第一次上传图像，除非他想要删除或更改图像。并且您可以在服务器中使用它来显示它。

我们的想法是将图像保留在服务器上，并告知模板是否可用。请记住，通过安全性，您无法在浏览器中指定文件输入控件的文件名，因此您必须使用替代控件，如上所述。

Answer 2

使用Ajax Submit方法提交，下面是示例代码...

@using (Ajax.BeginForm("/SaveDetails", "User", 
    new AjaxOptions { UpdateTargetId =   "divSaveUsers", InsertionMode = InsertionMode.Replace, 
    OnSuccess = "onUserSaveSuccess", OnFailure = "onUserSaveFailure", HttpMethod = "POST" },
    new { @autocomplete = "off", @id = "frmuserdetails" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)   
    <input type="button" value="Save" id="btnSaveUserData" />
}

<script>

   $("#btnSaveUserData").click(function (event) {
        if ($("#frmuserdetails").valid()) { 
           $("#frmuserdetails").unbind("submit").submit();    
        }
   });
</script>

如果不存在，请添加jquery.unobtrusive-ajax.js的引用。

如果您遇到任何问题，请告诉我。

由于

Raviranjan

在MVC中的POST操作后保持图像预览

2 个答案: