Question

我已经检查了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" />


      }

Answer 1

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

Answer 2

只有通过文件或图像上传才能实现良好的用户体验才能实现Ajax风格。但细节非常棘手。出于这个原因，我强烈建议jQuery File Upload plugin处理所有漂亮的细节。

您几乎不需要更改MVC代码中的任何内容。有关如何在ASP.NET中使用它的完整示例，请参见ASP.NET MVC: Simple example of ajax file upload using jQuery。

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

2 个答案: