Upload / Exibição de Imagens no MVC 4

Alguém sabe de algum tutorial passo a passo sobre como carregar / exibir imagens de um database usando o Entity Framework? Eu verifiquei trechos de código, mas ainda não sei como funciona. Eu não tenho código, porque além de escrever um formulário de upload, eu estou perdido. Qualquer (e eu quero dizer qualquer) ajuda é muito apreciada.

Em um sidenote, por que nenhum livro cobre esse tópico? Eu tenho o Pro ASP.NET MVC 4 e Professional MVC4, e eles não fazem menção a isso.

Dê uma olhada no meu artigo sobre o upload de imagens ou você pode usar o mesmo código descrito abaixo;
seu código de visão;

 @using (Html.BeginForm("FileUpload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) {    } 

seu controlador deve ter um método de ação que aceite 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"); } 

No entanto, se você ainda quiser saber mais … tente este artigo .

Atualização 1

Caso você queira fazer upload de arquivos usando o jQuery com assincronia, tente este artigo .

o código para manipular o lado do servidor (para upload múltiplo) é;

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

Esse controle também retorna o nome da imagem (em uma chamada de retorno de javascript), que pode ser usada para exibir a imagem no DOM.

ATUALIZAÇÃO 2

Alternativamente, você pode tentar Uploads de Arquivos Assíncronos no MVC 4 .

Aqui está um pequeno tutorial:

Modelo:

 namespace ImageUploadApp.Models { using System; using System.Collections.Generic; public partial class Image { public int ID { get; set; } public string ImagePath { get; set; } } } 

Visão:

  1. Crio:

     @model ImageUploadApp.Models.Image @{ ViewBag.Title = "Create"; } 

    Create

    @using (Html.BeginForm("Create", "Image", null, FormMethod.Post, new { enctype = "multipart/form-data" })) { @Html.AntiForgeryToken() @Html.ValidationSummary(true)
    Image
    @Html.LabelFor(model => model.ImagePath)

    }
    @Html.ActionLink("Back to List", "Index")
    @section Scripts { @Scripts.Render("~/bundles/jqueryval") }
  2. Índice (para exibição):

     @model IEnumerable @{ ViewBag.Title = "Index"; } 

    Index

    @Html.ActionLink("Create New", "Create")

    @foreach (var item in Model) { }
    @Html.DisplayNameFor(model => model.ImagePath)
    @Html.DisplayFor(modelItem => item.ImagePath) @Html.ActionLink("Edit", "Edit", new { id=item.ID }) | @Html.ActionLink("Details", "Details", new { id=item.ID }) | @Ajax.ActionLink("Delete", "Delete", new {id = item.ID} })
  3. Controlador (criar)

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

Espero que isso ajude 🙂

    $("#btncatsave").click(function () { var Name = $("#txtName").val(); var formData = new FormData(); var totalFiles = document.getElementById("picfile").files.length; var file = document.getElementById("picfile").files[0]; formData.append("FileUpload", file); formData.append("Name", Name); $.ajax({ type: "POST", url: '/Category_Subcategory/Save_Category', data: formData, dataType: 'json', contentType: false, processData: false, success: function (msg) { alert(msg); }, error: function (error) { alert("errror"); } }); }); [HttpPost] public ActionResult Save_Category() { string Name=Request.Form[1]; if (Request.Files.Count > 0) { HttpPostedFileBase file = Request.Files[0]; } }