如何上传图像和asp.net的MVC 4相同的页面上显示 [英] How to upload a image and display on same page in asp.net mvc 4

问题描述

我已经开发使用asp.net的 mvc4 和剃须刀语法的Web应用程序。
我需要使用文件上传和显示在同一页面与图像的细节，上传图片。

i have developed a web application using asp.net mvc4 and razor syntax. i need to upload an image using file uploader and display in the same page with details of the image.

作为一个例子有一个文件上传和提交按钮在 联系页面我的应用程序。当我上传的人的形象和点击提交按钮，它应该与它的细节，如图像名称，大小如一个页面某处显示图像。

as an example there's a "file uploader" and "submit button" in "contact page" of my application. when i upload an image of a person and click the submit button, it should display the image somewhere in the page with its details like image name, size like that.

有任何可能的方式来实现这一目标？

is there any possible way to achieve that?

这里是code为我的控制器类

here is the code for my controller class

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();
        }
    }

和这里是code的看法

and here is the code for 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" />

但如何页面上显示？

but how to display on page?

请帮忙。

推荐答案

在你拯救你的控制器操作的服务器上上传的文件，你可以在网址传回给该文件的视图，以便它可以在一个显示＆LT; IMG＆GT; 标签：

Once you save the uploaded file on the server from your controller action you could pass back the url to this file to the view so that it can be displayed in an <img> tag:

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();
    }
}

然后，让你的观点强类型，并添加一个＆LT; IMG＆GT; 标签，将显示图像如果模型不为空：

Then make your view strongly typed and add an <img> tag that will display the image if the model is not empty:

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

这篇关于如何上传图像和asp.net的MVC 4相同的页面上显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！