11

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

作为一个例子，我的应用程序中有一个"file uploader"和。当我上传一个人的图像和提交按钮时，它应该在页面的某处显示图像，并显示图像名称、大小等详细信息。"submit button""contact page"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" />

但是如何在页面上显示？

请帮忙。

4

4 回答 4

18

从控制器操作将上传的文件保存在服务器上后，您可以将此文件的 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="" />
}
于 2013-06-12T09:04:23.093 回答
3

在 HTML 中：

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

Javascript/JQuery 通过 TypeFileReader 

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如果您使用 AjaxToolKit AsyncFileUpload ，元素在哪里<input type="file">，您可以使用以下方法获取输入：fileUploadElement.get_inputFile()

请参考：图片上传前后如何预览？

于 2014-01-29T14:02:32.750 回答
1

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

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

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

于 2013-06-12T09:04:04.013 回答
-1

所以这是这样的典型流程。

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

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

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

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

于 2013-06-12T09:03:47.273 回答