[C#] MVC에서 파일 업로드하는 방법
안녕하세요. 명월입니다.
이 글은 C#의 MVC에서 파일 업로드하는 방법에 대한 글입니다.
C#에서 웹 서비스를 작성한다고 하면 보통 MVC Framework를 많이 사용합니다.
링크 - [C# 강좌 - 67] MVC Framework 프로젝트 생성하기
MVC Framework는 View와 Controller이 나누어져 있는 형태로 Controller이 먼저 호출이 되고 View를 찾아서 렌더링을 하면 Browser 화면에 표시되는 흐름을 가지고 있습니다.
화면 Html에서 input type=file의 엘리먼트를 사용해 업로드를 하게 되면 브라우져에서 서버로 요청하는 바운더리에 Binary 형식으로 데이터를 전송하는 형태입니다.
@{
// Layout을 사용하지 않음
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>FileUplaod</title>
</head>
<body>
<div>
<!-- 메시지를 표시하는 영역 -->
@ViewBag.Message
</div>
<br />
<!-- 파일 업로드 form enctype는 multipart/form-data는 메소드 타입은 POST, URL은 /Home/FileUpload이다. -->
<form method="POST" enctype="multipart/form-data" action="/Home/FileUpload">
<!-- file input 태그, 이름은 file -->
<input type="file" name="file" />
<!-- submit, 즉 전송 -->
<input type="submit">
</form>
</body>
</html>
using System.IO;
using System.Web;
using System.Web.Mvc;
namespace FileUpload.Controllers
{
// Home으로 시작하는 Controller
public class HomeController : Controller
{
// 요청 URL - Home/Index
public ActionResult Index()
{
// /View/Home/Index.cshtml를 렌더링한다.
return View();
}
// 요청 URL - Home/FileUpload
// 요청 Parameter에 name이 file인 요소를 받는다.
public ActionResult FileUpload(HttpPostedFileBase file)
{
try
{
// file에 업로드하고 그 파일 사이즈가 0byte 이상이면
if (file != null && file.ContentLength > 0)
{
// file이름 취득
string filename = Path.GetFileName(file.FileName);
// 저장할 경로 설정
string savepath = Path.Combine(@"d:\work\", filename);
// 파일 저장
file.SaveAs(savepath);
// 메시지 설정
ViewBag.Message = "File Uploaded Successfully.";
}
else
{
// 메시지 설정
ViewBag.Message = "File upload failed";
}
}
catch
{
// 메시지 설정
ViewBag.Message = "File upload failed";
}
// /View/Home/Index.cshtml를 렌더링한다.
return View("Index");
}
}
}
위 소스를 작성하고 프로젝트를 기동해 봅시다.
그리고 이미지 파일을 하나 첨부하겠습니다.
업로드 버튼을 누르면 url이 바뀌는 것을 확인할 수 있습니다.
이제 d:\work 폴더로 가보면 파일이 업로드되어 파일이 저장되는 것을 확인할 수 있습니다.
이번에는 단일 파일이 아닌 복수의 파일을 업로드 하겠습니다.
@{
// Layout을 사용하지 않음
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>FileUplaod</title>
</head>
<body>
<div>
<!-- 메시지를 표시하는 영역 -->
@ViewBag.Message
</div>
<br />
<!-- 파일 업로드 form enctype는 multipart/form-data는 메소드 타입은 POST, URL은 /Home/FileUpload이다. -->
<form method="POST" enctype="multipart/form-data" action="/Home/FileUpload">
<!-- file input 태그, 이름은 file, 복수 파일 첨부를 위해 multiple 속성을 추가한다. -->
<input type="file" name="file" multiple/>
<!-- submit, 즉 전송 -->
<input type="submit">
</form>
</body>
</html>
using System.IO;
using System.Web;
using System.Web.Mvc;
namespace FileUpload.Controllers
{
// Home으로 시작하는 Controller
public class HomeController : Controller
{
// 요청 URL - Home/Index
public ActionResult Index()
{
// /View/Home/Index.cshtml를 렌더링한다.
return View();
}
// 요청 URL - Home/FileUpload, 파라미터 요소를 생략한다.
public ActionResult FileUpload()
{
try
{
// Request.Files에 데이터가 있는지 확인한다.
if (Request.Files != null && Request.Files.Count > 0)
{
// 복수의 업로드를 하니깐 반복문으로...
for (int i = 0; i < Request.Files.Count; i++)
{
// HttpPostedFileBase 인스턴스를 취득
var file = Request.Files[i];
// file이름 취득
string filename = Path.GetFileName(file.FileName);
// 저장할 경로 설정
string savepath = Path.Combine(@"d:\work\", filename);
// 파일 저장
file.SaveAs(savepath);
}
// 메시지 설정
ViewBag.Message = "File Uploaded Successfully.";
}
else
{
// 메시지 설정
ViewBag.Message = "File upload failed";
}
}
catch
{
// 메시지 설정
ViewBag.Message = "File upload failed";
}
// /View/Home/Index.cshtml를 렌더링한다.
return View("Index");
}
}
}
단일 업로드와 차이는 html 속성에는 multiple를 추가하였고 Controller에는 파라미터로 데이터를 받는 것이 아니라 Request 프로퍼티로 데이터를 받습니다.
이제 실행해 보겠습니다.
이번에는 파일을 두개 추가하도록 합니다. (Ctrl를 누른 상태에서 선택하면 복수 개를 선택할 수 있습니다.)
업로드 버튼을 누르면 url이 바뀌는 것을 확인할 수 있습니다.
이제 d:\work 폴더로 가보면 파일이 업로드되어 파일이 저장되는 것을 확인할 수 있습니다.
여기까지 C#의 MVC에서 파일 업로드하는 방법에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.