asp.net-mvc-3 - ASP.NET MVC 图像表单验证

Question

我在特定表单上遇到了问题。

如果表单已提交并且表单有错误(可能是我忘记填写必填字段)，则表单会按预期重新加载错误。但是，您之前选择的任何图像都会消失，需要重新选择。

在提交有错误的表单之前:

提交有错误的表单后:

这是正在使用的 HTML 标签:

<input type="file" accept="image/*" id="Image" name="Image"/>

我需要的是图像选择器在提交之间仍然保持所选图像。有没有好的方法来做到这一点？有没有办法将文件路径保存到 session 中并再次将其填充到元素中？

Answer 1

作为安全措施，浏览器不允许自动恢复文件上传字段。为防止验证文件丢失，要么在客户端执行所有验证(尽管您应该始终在服务器上再次验证)以便在一切正确之前永远不会提交表单，或者您必须获取提交的文件第一次并坚持下去，直到表单最终通过并完成所有验证。

在第二种情况下，您有几个选择:

1. 将内容保存在某处，并返回一个唯一的 ID 指针，以便在您返回表单时保存在隐藏字段中。您还应该考虑放置一个可见的标签，显示已上传的文件。您必须定期清理放弃并稍后回来的用户的上传(因此不会提交具有该相关 ID 的表单供您匹配上传)。

2. Base64 对上传文件的内容进行编码，并将其返回到隐藏字段中的 View 。这会占用更多带宽，但它不需要您在服务器上存储可能永远不会与正确表格相关联的文件。您也可以在返回的 View 中显示相同的图像，因为我相信您可以将 Base64 编码图像指定为图像标签(或者可能是 CSS 属性)的源。这可能是特定于浏览器的。

只要您的文件上传大小有限(例如 100kb)，选项 2 就是我最喜欢的方法。它并不比页面中包含的所有现代 JavaScript 库大多少，并且在让您的服务器无 session 、清理或过度处理的同时为用户提供更好的体验。

编辑:许多允许上传图片的网站还提供文件大小验证，如果文件过大则将其退回。在这种情况下，用户会反馈说他们的 Assets 没有被存储，您不必对它进行编码和返回。

编辑 2:

这是一篇关于浏览器标记 file upload control 的帖子value 字段为只读并防止它被 JavaScript 修改(它只能通过直接用户操作修改)。

这是关于使用 Base64 encoded image 的 SO 评论直接在 HTML 中。提问者正在寻找一种将数据放在单独文件中的方法，但这不是您想要的。 “这个作品”部分是我在上面的选项 2 中提到的。