如何在asp.net mvc 4中上传图像并显示在同一页面上答案

【问题标题】：How to upload a image and display on same page in asp.net mvc 4如何在asp.net mvc 4中上传图像并显示在同一页面上
【发布时间】：2013-06-08 07:30:09
【问题描述】：

我使用 asp.net mvc4 和 razor 语法开发了一个 Web 应用程序。我需要使用文件上传器上传图片并在同一页面中显示图片的详细信息。

例如，我的应用程序的"contact page" 中有一个"file uploader" 和"submit button"。当我上传一个人的图像和click 提交按钮时，它应该在页面的某处显示图像及其详细信息，如图像名称、大小等。

有什么方法可以实现吗？

这是我的控制器类的代码

public class FileUploadController : Controller
    {
        //
        // GET: /FileUpload/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult FileUpload()
        {
            return View();
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult FileUpload(HttpPostedFileBase uploadFile)
        {
            if (uploadFile.ContentLength > 0)
            {
                string filePath = Path.Combine(HttpContext.Server.MapPath("~/Img/"),
                                               Path.GetFileName(uploadFile.FileName));
            }
            return View();
        }
    }

这是查看代码

<h2>FileUpload</h2>

     @(Html.BeginForm("FileUpload", "FileUpload",FormMethod.Post, new { enctype = "multipart/form-data" }))
        <input name="uploadFile" type="file" />
        <input type="submit" value="Upload File" />

但是如何在页面上显示呢？

请帮忙。

【问题讨论】：

is there any possible way to achieve that? - 是的，当然。你到哪里去了？你做了什么研究，你试图写什么代码？您想问一下这段代码遇到了什么困难？

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

【解决方案1】：

一旦您从控制器操作将上传的文件保存到服务器上，您就可以将此文件的 url 传回视图，以便它可以显示在 <img> 标记中：

public class FileUploadController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult FileUpload()
    {
        return View();
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult FileUpload(HttpPostedFileBase uploadFile)
    {
        if (uploadFile.ContentLength > 0)
        {
            string relativePath = "~/img/" + Path.GetFileName(uploadFile.FileName);
            string physicalPath = Server.MapPath(relativePath);
            uploadFile.SaveAs(physicalPath);
            return View((object)relativePath);
        }
        return View();
    }
}

然后让你的视图强类型化并添加一个<img>标签，如果模型不为空，它将显示图像：

@model string
<h2>FileUpload</h2>

@using (Html.BeginForm("FileUpload", "FileUpload", FormMethod.Post, new { enctype = "multipart/form-data" })
{
    <input name="uploadFile" type="file" />
    <input type="submit" value="Upload File" />
}

@if (!string.IsNullOrEmpty(Model))
{
    <img src="@Url.Content(Model)" alt="" />
}

【讨论】：

我为什么不花时间呢？一旦 OP 用他迄今为止尝试过的代码示例更新了他的答案，我立即从他的问题中删除了我的反对票并回答了它。
@DarinDimitrov 我使用了您提供的代码及其工作。无论如何，thanx .. :) 但有一件事，我没有为此创建任何模型.. 我想在显示之前调整图像大小以及如何做到这一点？我必须为此使用模型还是什么？
您可以在将图像存储到磁盘之前调整服务器上的图像大小。然后将调整大小的文件名传递给客户端。
我看到他把他的代码放在评论里，我把它放在他的回答里。

【解决方案2】：

在 HTML 中：

<input type='file' onchange="readURL(this);" />

Javascript/JQuery 通过类型FileReader

if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }

其中input 是<input type="file"> 元素如果您使用 AjaxToolKit AsyncFileUpload，您可以使用以下方式获取输入：fileUploadElement.get_inputFile()

请参考：how to preview a image before and after upload?

【讨论】：

【解决方案3】：

要在页面上显示上传的图片，您必须将图片保存在某处，然后在<img> 标签中引用相应的 URL。

如果您将其保存在网站位置的磁盘上，您可以通过与保存位置对应的 URL 来引用它（因此，如果您将其保存到 Img，则相对 URL 将是 ~/Img/imagename）。

如果将其保存到数据库中，则必须提供单独的操作方法或HttpHandler 才能获取它。

【讨论】：

是的，安德烈。这是我无法理解的逻辑。谢谢你的帮助.. :)

【解决方案4】：

以下是此类事情的典型流程。

您从Index 操作开始，您可以看到文件上传控件。
文件上传的格式将提交给您的FileUpload 操作。
在你的FileUpload 行动中你做你的事，最后你return RedirectToAction("Index");

现在显然还有更多工作要做。您需要将该文件保存在某个地方，比如说在一个名为 UploadStuff 的目录中。

在您的索引操作中，您将读取该目录的文件。

这也是为了让你继续前进。在现实世界中，您将对该文件的引用存储在一个数据库中，并根据一些唯一标识符（例如 userId 或 productId）查询该数据库，以确定哪些上传的项目会显示在索引视图中。

【讨论】：