Come caricare un'immagine e visualizzare sulla stessa pagina in asp.net mvc 4

Question

ho sviluppato un'applicazione web usando asp.net mvc4 e sintassi del rasoio. Ho bisogno di caricare un'immagine usando file uploader e visualizzare nella stessa pagina i dettagli dell'immagine.

come esempio c'è un "file uploader" e "submit button" in "contact page" della mia applicazione. quando carico un'immagine di una persona e click il pulsante di invio, dovrebbe visualizzare l'immagine da qualche parte nella pagina con i suoi dettagli come il nome dell'immagine, dimensione del genere.

esiste un modo per raggiungerlo?

Ecco il codice per la mia classe di controllo

public class FileUploadController : Controller 
    { 
     // 
     // GET: /FileUpload/ 

     public ActionResult Index() 
     { 
      return View(); 
     } 
     public ActionResult FileUpload() 
     { 
      return View(); 
     } 

     [AcceptVerbs(HttpVerbs.Post)] 
     public ActionResult FileUpload(HttpPostedFileBase uploadFile) 
     { 
      if (uploadFile.ContentLength > 0) 
      { 
       string filePath = Path.Combine(HttpContext.Server.MapPath("~/Img/"), 
               Path.GetFileName(uploadFile.FileName)); 
      } 
      return View(); 
     } 
    } 

e qui è il codice per la vista

<h2>FileUpload</h2> 

    @(Html.BeginForm("FileUpload", "FileUpload",FormMethod.Post, new { enctype = "multipart/form-data" })) 
     <input name="uploadFile" type="file" /> 
     <input type="submit" value="Upload File" /> 

ma come visualizzare a pagina?

per favore aiuto.

Answer 1

Una volta salvato il file caricato sul server dalla tua azione di controllo si potrebbe passare di nuovo l'URL a questo file per la visualizzazione in modo che possa essere visualizzato in un <img> tag:

public class FileUploadController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    public ActionResult FileUpload() 
    { 
     return View(); 
    } 

    [AcceptVerbs(HttpVerbs.Post)] 
    public ActionResult FileUpload(HttpPostedFileBase uploadFile) 
    { 
     if (uploadFile.ContentLength > 0) 
     { 
      string relativePath = "~/img/" + Path.GetFileName(uploadFile.FileName); 
      string physicalPath = Server.MapPath(relativePath); 
      uploadFile.SaveAs(physicalPath); 
      return View((object)relativePath); 
     } 
     return View(); 
    } 
} 

quindi effettuare le visualizzare fortemente tipizzato e aggiungere un tag <img> che visualizzerà l'immagine se il modello non è vuota:

@model string 
<h2>FileUpload</h2> 

@using (Html.BeginForm("FileUpload", "FileUpload", FormMethod.Post, new { enctype = "multipart/form-data" }) 
{ 
    <input name="uploadFile" type="file" /> 
    <input type="submit" value="Upload File" /> 
} 

@if (!string.IsNullOrEmpty(Model)) 
{ 
    <img src="@Url.Content(Model)" alt="" /> 
} 

Answer 2

Quindi ecco il flusso tipico per qualcosa di simile.

1. Si avvia l'azione Index che è possibile visualizzare il controllo fileupload.
2. Il fileupload è in un modulo che verrà inviato all'azione FileUpload.
3. All'interno della vostra FileUpload azione Tu fai la tua cosa e alla fine si return RedirectToAction("Index");

Ora, ovviamente, non c'è altro da fare. Devi salvare quel file da qualche parte, diciamo in una directory chiamata UploadStuff.

All'interno dell'azione indice verrà visualizzata la directory del file.

Ancora una volta per farti andare. Nel mondo reale si sta memorizzando un riferimento a questo file in un database e interrogando quel database basato su qualche identificatore univoco come un ID utente o un ID prodotto per determinare quali elementi caricati vengono mostrati nella vista indice.

Answer 3

Per visualizzare l'immagine caricata sulla pagina, è necessario salvare l'immagine da qualche parte, quindi fare riferimento all'URL corrispondente nel tag <img>.

Se lo si salva su disco all'interno della posizione del sito Web, è possibile fare riferimento all'URL corrispondente alla posizione di salvataggio (quindi se lo si salva in Img l'URL relativo sarebbe ~/Img/imagename).

Se lo si salva nel database, è necessario fornire un metodo di azione separato o HttpHandler per ottenerlo.

Answer 4

in HTML:

<input type='file' onchange="readURL(this);" /> 

JavaScript/JQuery attraverso il tipo FileReader

if (input.files && input.files[0]) { 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
      $('#blah').attr('src', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 

dove input è l'elemento <input type="file"> se si utilizza AjaxToolKit AsyncFileUpload, è possibile ottenere l'ingresso utilizzando: fileUploadElement.get_inputFile()

Riferirsi ai: how to preview a image before and after upload?