Displaying Upload Image in Image Controller in Web API (2024)

Introduction

This article explains how to display the uploading image in the image control. First we browse the file and select the image then we click on the show image button, it displays the uploading image.

Use the following procedure to create a sample of the application.

1. Create an application:
   • Start Visual Studio 2012.
   • From the Start window select "Installed" -> "Visual C#" -> "Web".
   • Select "ASP.NET MVC4 Web Application" and click on the "Ok" button.

     

   • From the "MVC4 Project" window select "Web API".

     

   • Click on the "OK" button.
2. Now select the "HomeController"
   • In the "Solution Explorer".
   • Expand the Controller folder.
   • Select the "HomeController".

   

   Add the following code:
   

   See Also
   Free Facial Recognition Search: Impact of Free Search Tools
   1. usingSystem;
   2. usingSystem.Collections.Generic;
   3. usingSystem.IO;
   4. usingSystem.Linq;
   5. usingSystem.Web;
   6. usingSystem.Web.Mvc;
   7. namespaceMvcApplication3.Controllers
   8. {
   9. publicclassHomeController:Controller
   10. {
   11. publicActionResultIndex()
   12. {
   13. returnView();
   14. }
   15. [HttpPost]
   16. publicActionResultIndex(HttpPostedFileBasefile)
   17. {
   18. //extractonlythefielname
   19. varimageName=Path.GetFileName(file.FileName);
   20. varimgsrc=Path.Combine(Server.MapPath("~/images/"),imageName);
   21. stringfilepathToSave="images/"+imageName;
   22. file.SaveAs(imgsrc);
   23. ViewBag.ImagPath=filepathToSave;
   24. returnView();
   25. }
   26. }
   27. }

3. Now write the HTMl code in the "index.cshtml" file:

   • In the "Solution Explorer".

   • Expand "Views" folder.

   • Select "Home" -> "index.cshtml".

     Add the following code:
     

     1. @{
     2. ViewBag.Title="Uploadthefileanddisplaytheuploadedimage";
     3. }
     4. @using(Html.BeginForm("Index","Home",FormMethod.Post,new{enctype="multipart/form-data"}))
     5. {
     6. <div>
     7. SelectImage
     8. <inputtype="file"name="file"/>
     9. <inputtype="submit"value="ShowImage"name="Command"/><br/>
     10. <imgsrc="@ViewBag.ImagPath"style="width:200px;height:200px;"/>
     11. </div>
     12. <div>
     13. </div>
     14. }

4. Now execute the application.

Select the image and click on the "ShowImage" button.

• ASP.NET
• ASP.NET Web API
• Display Image in Image Controller
• Upload Image
• Web API