come caricare/visualizzare immagini utilizzando ASP.net MVC4 con Entity Framework

Question

Ho un modello di dati in questo modo

public class NewsItem 
{ 
    public virtual int Id { get; set; } 
    public virtual string NewsTitle { get; set; } 
    public virtual string NewsContent { get; set; } 
    public virtual byte[] NewsImage { get; set; } 
    public virtual DateTime DateAdded { get; set; } 
    public virtual bool IsLive { get; set; } 
} 

ho quindi visualizzare questi dati tramite una vista in questo modo:

@model BusinessObject.Domain.NewsItem 
<div class="row-fluid"> 
    <h3> 
     @Html.ValueFor(model => model.NewsTitle) 
    </h3> 
    <div class="span5"> 
    <img src="~/Content/images/stock.jpg" /> 
    </div> 

<div class="span7"> 
<p> 
    @Html.ValueFor(model => model.DateAdded) 
</p> 
<p> 
    @Html.ValueFor(model => model.NewsContent) 
</p> 
</div> 
</div> 

I quindi salvare i dati utilizzando le _db.SaveChanges() nel mio controller in questo modo:

[Authorize] 
    [HttpPost] 
    public ActionResult Create(CreateNewsViewModel input) 
    { 
     if (ModelState.IsValid) 
     { 
      var news = new NewsItem(); 
      news.NewsTitle = input.nTitle; 
      news.NewsContent = input.nContent; 
      news.DateAdded = input.nDateAdded; 
      news.IsLive = input.nIsLive; 
      Mydb data = new Mydb(); 
      data.NewsItems.Add(news); 
      data.SaveChanges(); 
      return View("Index", data.NewsItems); 

     } 
     else 
     { 
      return View(input); 
     } 
    } 

Attualmente non ho un po 'di caricamento delle immagini. Come andrei su questo? Nel mio db ho un campo binario, e il mio tipo di dati nel mio oggetto è un byte []. Ma non so dove devo gestire il caricamento dell'immagine?

Ho bisogno di un'azione separata che restituisca la vista? Alcuni suggerimenti su questo sarebbe grandioso.

Acclamazioni

Answer 1

Vorrete un campo di input di tipo di file da caricare dalla vista e un'istanza del WebImage per gestire l'immagine caricata:

Vista:

<input type="file" name="image" /> 

controller :

WebImage image = WebImage.GetImageFromRequest(); 
byte[] toPutInDb = WebImage.GetBytes(); 

// ... put the byte array into the database 

Per visualizzare le immagini dal database, si sarà ant un controller Azione che recupera l'array di byte dal database e restituisce un'azione File. È possibile ottenere questa immagine (per l'immagine recuperare azione di controllo) istanziando un'altra istanza WebImage sul ByteArray si recupera dal database:

WebImage image = new WebImage(byteArrayFromDb); 

File(image.GetBytes(), "image/" + image.ImageFormat, image.FileName); 

Answer 2

Dai un'occhiata alla jquery file uploader Potete trovare sample code per esso

Speranza questo aiuta

Answer 3

vorrei andare in questo modo:

nella classe del modello:

public class NewsItem 
{ 
    public virtual int Id { get; set; } 
    public virtual string NewsTitle { get; set; } 
    public virtual string NewsContent { get; set; } 
    public virtual string NewsImage { get; set; } //string instead of byte because you don't wanna store your whole image file in your database, but just the path of the image, and the image you will store in a folder somewhere on the server 
    public virtual DateTime DateAdded { get; set; } 
    public virtual bool IsLive { get; set; } 
} 

nel controller:

[Authorize] 
    [HttpPost] 
    public ActionResult Create(CreateNewsViewModel HttpPostedFileBase file)// add this 
    { 
     if (ModelState.IsValid) 
     { 
      if (file != null) 
      { 
       file.SaveAs(HttpContext.Server.MapPath("~/Images/") + file.FileName); 
       car.ImagePath = file.FileName; 
      } 
     // the rest of the code... 

     } 
     else 
     { 
      return View(input); 
     } 
    } 

Poi, nel vostro punto di vista si dovrebbe avere:

per l'upload:

<input id="NewsImage" title="Upload a image" type="file" name="file" /> 

per la visualizzazione del componente aggiuntivo ciclo foreach:

@Html.DisplayFor(modelItem => item.NewsImage) 

non dimenticare di aggiungere enctype = "multipart/form-data" nel Html.BeginForm

Spero che questo possa essere d'aiuto.