Visualizzazione di un'immagine caricata in MVC 3 Razor

Question

Bene, questo newbie sta facendo qualcosa di sbagliato quando si visualizzano immagini caricati sul server:

modello:

public class Person 
{ 
    public int ID { get; set; } 
    public string Name { get; set; } 
    public string ImageUrl { get; set; } 
} 

controllore (caricamento - chiamato dal [HttpPost] ActionResult pubblico Create):

public void Upload(Person person) 
{ 
    var image = WebImage.GetImageFromRequest(); 
    var filename = Path.GetFileName(image.FileName); 
    var path = Path.Combine(Server.MapPath("~/App_Data/Uploads/Fotos"), filename); 
    image.Save(path); 
    person.ImageUrl = Url.Content(Path.Combine("~/App_Data/Uploads/Fotos", filename)); 
} 

creare vista:

... 
@using (Html.BeginForm("Create", "Person", FormMethod.Post, new { @encType = "multipart/form-data" })) 
{ 
    ... 
    @FileUpload.GetHtml(initialNumberOfFiles: 1, allowMoreFilesToBeAdded: false, includeFormTag: false, uploadText: "image") 
    ... 
    <div> 
     <input type="submit" value="Create" /> | 
     @Html.ActionLink("Back", "Index") 
    </div> 
} 

Fin qui, tutto bene, l'immagine viene caricata nella cartella e l'URL viene salvato

Ora, voglio vedere nella visualizzazione dettagliata

vista di dettaglio:

<div class="display-foto"> 
    <img src="@Url.Content(Server.MapPath(Model.ImageUrl))" alt="IMAGE" />       
</div> 

Visualizzazione del codice generato, tutto sembra essere a posto:

<img src="D:\Users\x\Documents\Visual Studio 2010\Projects\CMI_AD\CMI_AD\App_Data\Uploads\Fotos\_nofoto.jpg" alt="IMAGE" /> 

Ma il fatto è che nulla viene visualizzato sullo schermo, tranne il testo "IMAG E".

Cosa sto sbagliando?

P.S. Ho provato senza Server.MapPath, usando l'indirizzo relativo "~ \ App_Data \ Uploads \ Fotos_nofoto.jpg" e il risultato è lo stesso.

--- EDIT ---

@ kmcc049: Ho provato la tua proposta la creazione di un aiutante

public static class MyHelpers 
{ 
    public static IHtmlString MyImage(this HtmlHelper htmlHelper, string url) 
    { 
     var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext); 
     var img = new TagBuilder("img"); 
     img.Attributes["alt"] = "[IMAGE]"; 
     img.Attributes["src"] = UrlHelper.GenerateContentUrl(url, htmlHelper.ViewContext.HttpContext); 
     return MvcHtmlString.Create(img.ToString(TagRenderMode.SelfClosing)); 
    } 
} 

la chiamata nella vista:

@Html.MyImage(Model.ImageUrl) 

il codice generato è

<img alt="[IMAGE]" src="/App_Data/Uploads/Fotos/_nofoto.jpg" /> 

ma la ricerca ult è la stessa: nessuna immagine :(

--- --- RISOLTO

A quanto pare l'App_Data non è una buona posizione per salvare i file caricati, perché loro l'accesso ai comporterà un errore 403 - Accesso negato. Sposto i file in ~/Uploads/Fotos e funziona.

Answer 1

Questo non è un percorso HTTP valido. Questo è il percorso della cartella sul tuo computer.

provare il metodo di UrlHelper.GenerateContentUrl() invece http://msdn.microsoft.com/en-us/library/system.web.mvc.urlhelper.generatecontenturl.aspx

Answer 2

Caricamento un'immagine e quindi la visualizzazione è un requisito molto comune per qualsiasi applicazione web. Recentemente mi è stato chiesto di consentire a un utente di aggiungere un'immagine del profilo e in seguito di visualizzarla sulla sua bacheca.

Quindi ecco cosa ho fatto, spero che questo aiuti anche voi.

Razor Codice

@using (Html.BeginForm("SaveSettings", "Blog", FormMethod.Post, new {  enctype="multipart/form-data"})) 
{ 
    @Html.TextBoxFor(m => m.BlahBlah) 

    // and more... 

    <input type="file" name="file" id="file" /> 
    <input type="submit" name="submitButton" value="Save" /> 
} 

La cosa importante da notare qui è che abbiamo aggiunto una proprietà html chiamato enctype come enctype="multipart/form-data".

Il prossimo, il metodo di azione per questo modulo. L'azione accetta due parametri di input:

UserModel modello: tutti i dati sono stati inseriti nel modulo. HttpPostedFileBase file: qui è dove verrà pubblicata l'immagine caricata. Codice

[HttpPost] 
public ActionResult Index(UserModel model, HttpPostedFileBase file) 
{ 

if (file.ContentLength > 0) { 

// code for saving the image file to a physical location. 
    var fileName = Path.GetFileName(file.FileName); 
    var path = Path.Combine(Server.MapPath("~/Uploads/Profile"), fileName); 
    file.SaveAs(path); 

// prepare a relative path to be stored in the database and used to display later on. 
    path = Url.Content(Path.Combine("~/Uploads/Profile", fileName)); 
// save to db 

    return RedirectToAction("Index"); 

    } 

Si può anche richiedere qualche tempo per caricare immagini multiple, anche questo non è difficile al di sotto è il codice per questo. Utilizzando IEnumerable.

Codice Razor:

@using (Html.BeginForm("SaveSettings", "Blog", FormMethod.Post, new { enctype="multipart/form-data"})) 
{ 
<input type="file" name="file" id="file" /> <input type="file2" name="file2" id="file2" /> 
<input type="submit" name="submitButton" value="Save" /> 
} 

ed ecco come sarà la lettura dei file pubblicati.

[HttpPost] 
public ActionResult Index(IEnumerable<HttpPostedFileBase> files) { 
    foreach (var file in files) { 

    // iterate through each file here... 
    } 
    return RedirectToAction("Index"); 

}

Ora che hai caricato l'immagine e salvato il percorso dell'immagine, il passo successivo è quello di visualizzare l'immagine.

Visualizzazione immagine caricata

Cheers!

Riferimenti ** **

http://haacked.com/archive/2010/07/16/uploading-files-with-aspnetmvc.aspx

Displaying an uploaded image in MVC 3 Razor

https://stackoverflow.com/a/5248365/1182982