在同一页面中显示上传的图像 Asp MVC 4 Razor答案

【问题标题】：Display uploaded image in the same page Asp MVC 4 Razor在同一页面中显示上传的图像 Asp MVC 4 Razor
【发布时间】：2014-05-09 15:20:30
【问题描述】：

我检查了this 处理相同问题的问题，但对我没有用。我实际上上传了一张图片，但是当我单击加载按钮以显示图片时，它会将我重定向到另一个页面，但我想在当前页面中显示它。你知道如何解决这个问题吗？这是我的控制器

[HttpPost]
    public ActionResult Index(HttpPostedFileBase file)
    {
        var fileName = Path.GetFileName(file.FileName);
                var path = Path.Combine(Server.MapPath("~/Content"), fileName);
                file.SaveAs(path);


                return File(path, "image/jpeg");

    }

在我看来

@using(Html.BeginForm("Index","Home", FormMethod.Post, new { @enctype = "multipart/form-data" }))
    {
        <input style="margin-left:40px;cursor:pointer;" type="file" name="file" id="upload1" />
        <input type="submit" style="margin-left:40px;cursor:pointer;" id="load1" value="Upload" />

        <img src="myimage" alt="Logo" />


      }

【问题讨论】：

与其返回文件，不如重定向到HttpGet版本的Index()？
另一种选择是创建一个接受文件的单独方法，通过 ajax 调用它，然后只返回图像的路径，以便您可以插入 img 标签

标签： c# asp.net-mvc-4 razor image-uploading

【解决方案1】：

您需要通过 ajax 提交表单，这样用户就不会被带到另一个页面。通过 ajax 提交文件很棘手，因此您可能想要使用 jQuery Form Plugin 或类似的东西。在您的操作方法中，您需要返回上传图像的 URL，而不是实际的图像字节。然后，您将使用 javascript 将此 URL 分配给图像标记的来源。另外，我认为您不能像上面那样在操作方法中将上传的文件作为参数访问。您可能需要从 Request.Files 集合中获取文件。

【讨论】：

【解决方案2】：

要通过文件或图像上传来获得良好的用户体验，唯一的方法就是使用 Ajax 样式。然而细节非常棘手。出于这个原因，我强烈建议jQuery File Upload plugin 处理所有漂亮的细节。

您几乎不需要更改 MVC 代码中的任何内容。可以在ASP.NET MVC: Simple example of ajax file upload using jQuery 中找到如何将其与 ASP.NET 一起使用的完整示例。

【讨论】：