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!

6 nhận xét:

Nặc danh nói...

Ở đâu ra DirectoryInfo

Đỗ Đức Việt nói...

DirectoryInfo ở trong thư viện System.IO

Thiên Thần CNTT nói...

Nếu dùng database, thì phải lưu như thế nào vậy bạn?

Tung Lam nói...
Nhận xét này đã bị tác giả xóa.
Tung Lam nói...

sao khi mình up lên host thì lại không thể up ảnh lên được, mà trong localhost thì lại chạy như thường....!

Vinh Quang nói...

Bạn chưa phân quyền cho thư mục trên Host