在上传图片的形式，并显示在MVC 4 [英] Upload Image in form and show it on MVC 4

问题描述

什么是存储用户上传的图片，然后将其显示在我的网站的最佳方法？

1. 保存它作为DB二进制文件。那我应该怎么用`img`表现出来？
   
   我想我应该把它写入一个目录，然后以某种方式传递它的地址作为`img`的`src`属性。
   
2. 我可以在某处的Web服务器存储，图像的地址存储在数据库中。那么我应该简单地`src`属性指定数据库中的地址。
   
3. 的其他方式？
   

在我看来，第二种方式更为方便。

而另一个问题！

在这两种情况下，我如何上传HTML格式的图像这个？在 @Html doesent甲肝像 @ Html.FileFor（...），我怎么能得到的数据进行任何<在我的动作
code>＆LT;输入类型=文件/＆GT？
我AP preciate任何建议。

解决方案

  

在我看来，第二种方式更为方便。

在我看来，

呀也是如此。

  

在这两种情况下，我怎么能在HTML表单上传此图片？

pretty容易。一如往常，在ASP.NET MVC应用程序开始通过设计视图模型：

 公共类MyViewModel
{
    [需要]
    公共HttpPostedFileBase文件{搞定;组; }
}
 

，那么你可以有2动作控制器（一个渲染视图和其他处理文件上传）：

 公共类HomeController的：控制器
{
    公众的ActionResult指数（）
    {
        返回查看（新MyViewModel（））;
    }    [HttpPost]
    公众的ActionResult指数（MyViewModel模型）
    {
        如果（！ModelState.IsValid）
        {
            //用户没有上传任何文件= GT;
            //为了显示错误消息再次呈现相同的看法
            返回查看（模型）;
        }        //在此阶段的模型是有效= GT;
        //你可以在这里处理文件上传        //让我们生成一个文件名到文件服务器上存储
        变种文件名= Guid.NewGuid（）的ToString（）+ Path.GetFileName（file.FileName）。
        VAR路径= Path.Combine（使用Server.Mappath（〜/ App_Data文件），文件名）;
        //上传的文件存储在文件系统上
        file.SaveAs（路径）;        // TODO：现在你可以在路径存储在数据库        //最后返回一些的ActionResult
        //告知用户上传的过程是成功的用户
        返回的内容（感谢您的上传文件已经成功保存在我们的服务器上。）;
    }
}
 

最后你都会有相应的强类型的观点，将contgain形式上传的文件：

  @model MyViewModel
@using（Html.BeginForm（NULL，NULL，FormMethod.Post，新{ENCTYPE =的multipart / form-data的}））
{
    ＆LT; D​​IV＆GT;
        @ Html.LabelFor（X =＆GT; x.File）
        @ Html.TextBoxFor（X =＆GT; x.File，新的{type =文件}）
        @ Html.ValidationMessageFor（X =＆GT; x.File）
    ＆LT; / DIV＆GT;
    ＆LT;按钮式=sybmit＆GT;＆上传LT; /按钮＆GT;
}
 

此外，我建议你阅读 菲尔哈克的博客后 ，说明在ASP.NET MVC文件上传工作。

What is the Best way to store an image uploaded by the user and then show it in my website?

1. Store it as binary in DB. then how should I show it with `img`?
   I think I should write it to a directory somehow then pass it's address as `src` attribute of `img`.
2. I can store it somewhere in web server, store the address of image in database. then I should simply specify the address in database in `src` attribute.
3. Other ways?!

in my opinion the second way is more convenient.
and another question!
In both case How Can I upload this images in html form? the @Html doesent hav anything like @Html.FileFor(...) and how can I get data of <input type='file'/> in my Action?
I appreciate any suggestion.

解决方案

in my opinion the second way is more convenient.

Yeah in my opinion as well.

In both case How Can I upload this images in html form?

Pretty easy. As always in an ASP.NET MVC application you start by designing a view model:

public class MyViewModel
{
    [Required]
    public HttpPostedFileBase File { get; set; }
}

then you could have a controller with 2 actions (one rendering the view and another handling the file upload):

public class HomeController: Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        if (!ModelState.IsValid)
        {
            // the user didn't upload any file =>
            // render the same view again in order to display the error message
            return View(model);
        }

        // at this stage the model is valid => 
        // you could handle the file upload here

        // let's generate a filename to store the file on the server
        var fileName = Guid.NewGuid().ToString() + Path.GetFileName(file.FileName);
        var path = Path.Combine(Server.MapPath("~/App_Data"), fileName);
        // store the uploaded file on the file system
        file.SaveAs(path);

        // TODO: now you could store the path in your database

        // and finally return some ActionResult
        // to inform the user that the upload process was successful
        return Content("Thanks for uploading. Your file has been successfully stored on our server");
    }
}

and finally you will have a corresponding strongly typed view that will contgain the form to upload the file:

@model MyViewModel
@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div>
        @Html.LabelFor(x => x.File)
        @Html.TextBoxFor(x => x.File, new { type = "file" })
        @Html.ValidationMessageFor(x => x.File)
    </div>
    <button type="sybmit">Upload</button>
}

Also I would recommend you reading Phil Haack's blog post that illustrates file uploading in ASP.NET MVC works.

这篇关于在上传图片的形式，并显示在MVC 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！