如何上傳圖像並在asp.net中顯示在同一頁上mvc 4

我開發了一個使用asp.net mvc4和razor語法的web應用程序。我需要使用文件上傳器上傳圖片，並在同一頁面中顯示圖片的詳細信息。如何上傳圖像並在asp.net中顯示在同一頁上mvc 4

作爲示例，我的應用程序中有"file uploader"和"submit button"在"contact page"。當我上傳一個人的圖像和click提交按鈕時，它應該在頁面中的某個地方顯示圖像，其詳細信息如圖像名稱，大小如此。

是否有任何可能的方式來實現這一目標？

這裏是我的控制器類

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

的代碼，這裏是視圖

<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" />

但如何在頁面上顯示的代碼？

請大家幫忙。

來源

2013-06-12 sanzy

'是否有任何可能的方法來實現這一目標？' - 當然是。你到哪裏去了？你做了什麼研究，你試圖寫什麼代碼？您希望詢問有關此代碼遇到的困難？ –

一旦你從你的控制器操作在服務器上保存上傳的文件，你可以在網址傳回該文件的視圖，以便它可以在<img>標籤顯示：

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

然後做查看強類型，並添加<img>標籤，將顯示圖像如果模型不爲空：

@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="" /> 
}

來源

2013-06-12 09:04:23

哈哈達林我很驚訝，你花了這個時間.. –

爲什麼我不花時間？一旦OP用他迄今爲止嘗試的代碼樣本更新了他的答案，我立即將他的問題從他的問題中刪除並回答。 –

@DarinDimitrov我用你給的代碼和它的工作。 thanx anywy .. :)但有一點，我還沒有爲此創建任何模型..我想在顯示前調整圖像大小，以及如何做到這一點？我必須使用該模型還是什麼？ – sanzy

-1

所以這裏就是這樣的典型流程。

您從Index行動開始，您可以看到fileupload控件。
fileupload的格式將會提交到您的FileUpload操作。
裏面你FileUpload動作你做你的事，並在結束時，你return RedirectToAction("Index");

現在顯然還有更多的工作要做。您需要將該文件保存在某個地方，比如在一個名爲UploadStuff的目錄中。

在您的索引操作中，您將爲您的文件讀取該目錄。

再次，這是讓你走。在現實世界中，您將存儲對該文件的引用，例如在數據庫中查詢該數據庫，並根據某個唯一標識符（如userId或productId）查詢該數據庫，以確定哪些上載的項目顯示在索引視圖中。

來源

2013-06-12 09:03:47

要在頁面上顯示上傳的圖像，您必須將圖像保存到某個位置，然後在<img>標記中引用相應的URL。

如果您將其保存在網站位置的磁盤上，您可以通過與保存位置相對應的URL來引用它（因此，如果將它保存爲Img，則相對URL將爲~/Img/imagename）。

如果將它保存到數據庫中，則必須提供單獨的操作方法或HttpHandler才能獲取它。

來源

2013-06-12 09:04:04

是的安德烈。它的邏輯是我無法完成的。 thanx的幫助.. :) – sanzy

在HTML：

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

的JavaScript/JQuery的通過類型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]); 
    }

其中input是<input type="file">元素如果使用AjaxToolKit AsyncFileUpload，您可以用獲取輸入：fileUploadElement.get_inputFile()

請參考，以：how to preview a image before and after upload?

來源

2014-01-29 14:02:32

如何上傳圖像並在asp.net中顯示在同一頁上mvc 4

回答

相關問題