Upload Image Trong ASP.NET MVC

Những ai đã quen dùng ASP.NET để upload ảnh thì sẽ cảm thấy rất dễ chịu với control .NET FileUpload. Nhưng khi mới bắt đầu học ASP.NET MVC, điều đơn giản này lại trở thành khá phức tạp. Bài viết sau đây sẽ hướng dẫn các bạn Upload Image lên server trong ASP.NET MVC

Giao diện chính của chương trình như sau:


Bước 1: Tạo 1 controller sử dụng để tải ảnh lên và hiển thị các ảnh được tải

//Mới đầu vào trang
       public ActionResult UploadImage()
       {
           ViewData["Message"] = "Please choose a image to Upload";
           const string folderThumbPath = "/Content/Images/";
           var directoryThumbs = new DirectoryInfo(Server.MapPath(folderThumbPath));
           var listImages = directoryThumbs.GetFiles().Select(file => file.Name).ToList();
           ViewData["listImages"] = listImages;
           return View("/Views/Home/UploadImage.aspx");
       }

Bước 2: Tạo 1 Controller để thực hiện save ảnh

        //khi ấn save
       [HttpPost]
       public ActionResult UploadImage(string str)
       {
           if (ModelState.IsValid)
           {
               if (Request.Files != null)
               {
                   var posted = Request.Files["uploadFile"];
                   if (posted.FileName != "" && posted.ContentLength<=512000)//500kb                     {                         const string pathStoredImage = "/Content/Images/";                         var imageName = Path.GetFileName(posted.FileName);                         var filePath = pathStoredImage + imageName;                         posted.SaveAs(Server.MapPath(filePath));                     }                 }             }             return RedirectToAction("UploadImage");         } 

Bước 3: Tạo view để hiển thị

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="System.IO" %>


    Upload Image

   
    <%
        var listPictureName = (IList)ViewData["listImages"];%>
    
        

        

            <%=ViewData["message"] %>
        

            
            

        
        

            <%
                System.IO.DirectoryInfo dr = new DirectoryInfo(Server.MapPath("~/Content/Images"));
                FileInfo[] f = dr.GetFiles();
                if (listPictureName != null)
                {
                    foreach (FileInfo item in f)
                    {%>
                        "  width="100px" height="100px"/>
                    <%}
                }%>
        
        
    

Dowload Project

Chúc các bạn thành công!