在MVC 4中上传/显示图像

Question

任何人都知道如何使用Entity Framework从数据库上传/显示图像的任何一步一步的教程？我已经检查了代码片段,但我仍然不清楚它是如何工作的.我没有代码,因为除了写一个上传表格,我迷路了.非常感谢任何(我的意思是任何)帮助.

在旁注中,为什么没有任何书籍涵盖这个主题？我有Pro ASP.NET MVC 4和Professional MVC4,他们没有提到它.

Answer 1

看看我上传图片的文章,或者你可以使用下面描述的相同代码;
你的观点代码;

@using (Html.BeginForm("FileUpload", "Home", FormMethod.Post, 
                            new { enctype = "multipart/form-data" }))
{  
    <label for="file">Upload Image:</label> 
    <input type="file" name="file" id="file" style="width: 100%;" /> 
    <input type="submit" value="Upload" class="submit" /> 
}

你的控制器应该有接受的动作方法HttpPostedFileBase;

 public ActionResult FileUpload(HttpPostedFileBase file)
    {
        if (file != null)
        {
            string pic = System.IO.Path.GetFileName(file.FileName);
            string path = System.IO.Path.Combine(
                                   Server.MapPath("~/images/profile"), pic); 
            // file is uploaded
            file.SaveAs(path);

            // save the image path path to the database or you can send image 
            // directly to database
            // in-case if you want to store byte[] ie. for DB
            using (MemoryStream ms = new MemoryStream()) 
            {
                 file.InputStream.CopyTo(ms);
                 byte[] array = ms.GetBuffer();
            }

        }
        // after successfully uploading redirect the user
        return RedirectToAction("actionname", "controller name");
    }

更新1

如果你想使用异步上传的jQuery上传文件,那么试试这篇文章.

处理服务器端的代码(用于多次上传)是;

 try
    {
        HttpFileCollection hfc = HttpContext.Current.Request.Files;
        string path = "/content/files/contact/";

        for (int i = 0; i < hfc.Count; i++)
        {
            HttpPostedFile hpf = hfc[i];
            if (hpf.ContentLength > 0)
            {
                string fileName = "";
                if (Request.Browser.Browser == "IE")
                {
                    fileName = Path.GetFileName(hpf.FileName);
                }
                else
                {
                    fileName = hpf.FileName;
                }
                string fullPathWithFileName = path + fileName;
                hpf.SaveAs(Server.MapPath(fullPathWithFileName));
            }
        }

    }
    catch (Exception ex)
    {
        throw ex;
    }

此控件还返回图像名称(在javascript回调中),然后您可以使用它在DOM中显示图像.

更新2

或者,您可以在MVC 4中尝试异步文件上载.

Answer 2

这是一个简短的教程:

模型:

namespace ImageUploadApp.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Image
    {
        public int ID { get; set; }
        public string ImagePath { get; set; }
    }
}

视图:

1. 创建:

   @model ImageUploadApp.Models.Image
   @{
       ViewBag.Title = "Create";
   }
   <h2>Create</h2>
   @using (Html.BeginForm("Create", "Image", null, FormMethod.Post, 
                                 new { enctype = "multipart/form-data" })) {
       @Html.AntiForgeryToken()
       @Html.ValidationSummary(true)
       <fieldset>
           <legend>Image</legend>
           <div class="editor-label">
               @Html.LabelFor(model => model.ImagePath)
           </div>
           <div class="editor-field">
               <input id="ImagePath" title="Upload a product image" 
                                     type="file" name="file" />
           </div>
           <p><input type="submit" value="Create" /></p>
       </fieldset>
   }
   <div>
       @Html.ActionLink("Back to List", "Index")
   </div>
   @section Scripts {
       @Scripts.Render("~/bundles/jqueryval")
   }
   

2. 索引(用于显示):

   @model IEnumerable<ImageUploadApp.Models.Image>
   
   @{
       ViewBag.Title = "Index";
   }
   
   <h2>Index</h2>
   
   <p>
       @Html.ActionLink("Create New", "Create")
   </p>
   <table>
       <tr>
           <th>
               @Html.DisplayNameFor(model => model.ImagePath)
           </th>
       </tr>
   
   @foreach (var item in Model) {
       <tr>
           <td>
               @Html.DisplayFor(modelItem => item.ImagePath)
           </td>
           <td>
               @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
               @Html.ActionLink("Details", "Details", new { id=item.ID }) |
               @Ajax.ActionLink("Delete", "Delete", new {id = item.ID} })
           </td>
       </tr>
   }
   
   </table>
   

3. 控制器(创建)

   public ActionResult Create(Image img, HttpPostedFileBase file)
   {
       if (ModelState.IsValid)
       {
           if (file != null)
           {
               file.SaveAs(HttpContext.Server.MapPath("~/Images/") 
                                                     + file.FileName);
               img.ImagePath = file.FileName;
           }  
           db.Image.Add(img);
           db.SaveChanges();
           return RedirectToAction("Index");
       }
       return View(img);
   }
   

希望这会有所帮助:)