Question

我使用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" />

但如何在页面上显示？

请帮忙。

Answer 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="" />
}

Answer 2

HTML中的

：

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

通过类型FileReader

的Javascript / JQuery

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?

Answer 3

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

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

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

Answer 4

所以这是典型的流程。

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

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

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

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

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

4 个答案: