3

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

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

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

在此处输入图像描述

提交有错误的表单后：

在此处输入图像描述

这是正在使用的 HTML 标记：

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

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

4

3 回答 3

2

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

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

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

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

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

编辑：许多允许上传图像的网站还提供文件大小验证，如果文件过大，则将其退回。在这种情况下，用户收到他们的资产尚未存储的反馈，您无需对其进行编码和归还。

编辑2：

这是一篇关于浏览器将文件上传控件值字段标记为只读并防止其被 JavaScript 修改（只能通过直接用户操作修改）的帖子。

这是关于直接在 HTML 中使用Base64 编码图像的 SO 评论。提问者正在寻找一种将数据放在单独文件中的方法，但这不是您想要的。'this works' 部分是我在上面的选项 2 中所指的部分。

于 2013-04-16T19:34:31.693 回答
1

您可以做到这一点的唯一方法是在客户端提供验证。这是因为提交到服务器“发送”了一个表单，然后重新发送并返回错误。正如评论中指出的那样，由于安全原因，该文件已被清除（感谢 Eric）

要在 MVC 3 中进行客户端验证，您可以使用无障碍 jquery 验证。为此，只需添加 web.config：

<appSettings>
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
于 2013-04-16T19:12:21.780 回答
1

我认为您可以使用隐藏字段并显示标签中选择的文件。验证后获取文件内容并将其保存在 Session 或某个临时位置。然后在标签上显示页面时用户之前选择的文件路径并在隐藏字段中更新相同。如果用户再次提交表单，请先检查文件是否为NULL但隐藏字段值存在，这意味着您已经提前保存了文件，如果路径与隐藏字段不同，您可能需要再次获取文件内容。

仅保存路径不会帮助您保存第一次上传的文件流。我认为如果您的用户会因为不再加载文件而感到高兴，那么您必须从您的服务器资源中支付一些费用:)

于 2013-04-16T19:15:56.870 回答