(7) Razor 강좌 - 파일처리, 파일 업로드
안녕하세요. 김대우 입니다.
코난이와 함께하는 Razor & WebMatrix 시리즈 강좌리스트
(1) WebMatrix와 Razor! 이제 시작합니다.
(2) WebMatrix 설치부터 Hello World까지
(7) Razor 강좌 - 파일처리, 파일 업로드 - (지금 보고 계신 내용)
(8) Razor 강좌 - 데이터베이스 처리
(9) Razor 강좌 - Helper 소개(이미지, 비디오)
(10) Razor 강좌 - 디버깅
(11) Razor 강좌 - 캐시 처리
지난 시간에는 “(6) Razor 강좌 - 레이아웃 페이지 구조 처리” 강좌를 진행 했습니다.
이번 시간에는 바로 이어서 일곱번째 강좌, “(7) Razor 강좌 – 파일처리” 강좌를 진행 하도록 하겠습니다.
이번 내용도 쉬워요. 아마 현업에서 개발하시는 분들은 느끼시겠습니다만, 소규모의 사이트를 제작할 경우에도 파일 작업 보다는 데이터베이스 작업을 선호하는 분들이 많으실 거에요.
하지만, 파일 업로드와 같은 처리는 자주 필요하고, 간단한 업로드된 파일들에 대한 처리 작업은 파일 처리 과정에서 종종 쓰이실 경우가 있으니 모쪼록 많은 도움 되시길 바랍니다.
이 강좌는 파일처리 작업인 “파일 쓰기”, “파일 읽기”, “파일 수정”, “파일 삭제”, “파일 업로드(여러 파일 업로드)” 과정으로 진행됩니다.
파일쓰기 작업
Razor에서는 이러한 파일 처리 작업이 아주 쉬워요. 바로 코드를 통해 설명 드리도록 하겠습니다.
@{
string result = "";
if (IsPost)
{
// 사용자 입력 값을 변수에 저장
string firstName = Server.HtmlEncode(Request["FirstName"]);
string lastName = Server.HtmlEncode(Request["LastName"]);
string email = Server.HtmlEncode(Request["Email"]);
// 문자열 연결
string userData = firstName + "," + lastName +
"," + email + Environment.NewLine;
// 경로와 파일 이름 설정
string dataFile = Request.PhysicalApplicationPath + "data.txt";
// 파일에 쓰기
try
{
File.WriteAllText (@dataFile, userData);
result = "저장되었습니다.";
}
catch (Exception e)
{
result = "쓰기 도중에 오류가 발생 했습니다.";
}
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>파일에 쓰기 작업</title>
</head>
<body>
<form id="form1" method="post">
<div>
<table>
<tr>
<td>이름 :</td>
<td><input id="FirstName" name="FirstName" type="text" /></td>
</tr>
<tr>
<td>성 :</td>
<td><input id="LastName" name="LastName" type="text" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input id="Email" name="Email" type="text" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"/></td>
</tr>
</table>
</div>
<div>
@if(result != "")
{
<p>결과 : @result</p>
}
</div>
</form>
</body>
</html>
File 이라는 폴더를 만들고 Write.cshtml 파일로 저장한 후에 실행합니다.
단순히, 사용자에게 입력 값을 받고, POST 처리가 발생하면 값을 변수에 저장해 파일에 쓰는 예제 입니다. File 개체를 이용한다는 것 정도만 참고 하시면 될 것 같습니다.
파일이 만들어지는 위치는
Request.PhysicalApplicationPath + "data.txt";
처리에 의해서 결정되는데요, 보통 문서 폴더 하위의 “My Web Sites\WebSite1” 폴더가 기본 경로이실 거에요. 여기 하위에 data.txt 파일이 위치하고 있을 겁니다.
다음으로 파일 이어쓰기 - Append 작업을 해 보도록 할께요.
파일 이어쓰기 – Append 작업
@{
string result = "";
if (IsPost)
{
// 사용자 입력 값을 변수에 저장
string firstName = Server.HtmlEncode(Request["FirstName"]);
string lastName = Server.HtmlEncode(Request["LastName"]);
string email = Server.HtmlEncode(Request["Email"]);
// 문자열 연결
string userData = firstName + "," + lastName +
"," + email + Environment.NewLine;
// 경로와 파일 이름 설정
string dataFile = Request.PhysicalApplicationPath + "data.txt";
// 파일에 Append
try
{
File.AppendAllText (@dataFile, userData);
result = "저장되었습니다.";
}
catch (Exception e)
{
result = "오류가 발생 했습니다.";
}
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>이어쓰기 - Append 처리</title>
</head>
<body>
<form id="form1" method="post">
<div>
<table>
<tr>
<td>이름:</td>
<td><input id="FirstName" name="FirstName" type="text" /></td>
</tr>
<tr>
<td>성:</td>
<td><input id="LastName" name="LastName" type="text" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input id="Email" name="Email" type="text" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"/></td>
</tr>
</table>
</div>
<div>
@if(result != "")
{
<p>결과: @result</p>
}
</div>
</form>
</body>
</html>
Append.cshtml 파일로 저장하고 실행합니다.
마찬가지로 Write와 같지요? AppendAllText를 이용해 기존 파일의 뒤에 이어쓰기를 진행합니다.
다음으로 파일 읽기를 진행해 보도록 할게요.
파일 읽기 작업
@{
string result = "";
Array userData = null;
char[] delimiterChar = {','};
string dataFile = Request.PhysicalApplicationPath + "data.txt";
try
{
if (File.Exists(dataFile))
{
userData = File.ReadAllLines(dataFile);
if (userData == null)
{
// 빈 파일 오류.
result = "파일이 비어 있습니다.";
}
}
else
{
// 파일 존재 안 함
result = "파일이 존재하지 않습니다.";
}
}
catch (Exception e)
{
result = e.Message.ToString();
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>파일 읽기</title>
</head>
<body>
<div>
<h1>파일 읽기 처리 </h1>
@dataFile
@result
@if (result == "")
{
<ol>
@foreach (string dataLine in userData)
{
<li>
User
<ul>
@foreach (string dataItem in dataLine.Split(delimiterChar))
{
<li>@dataItem</li >
}
</ul>
</li>
}
</ol>
}
</div>
</body>
</html>
Read.cshtml 파일로 저장합니다.
조금씩 난이도가 올라가나요? 간단히, 저희가 앞에서 저장한 파일을 읽어 옵니다. userData라는 배열을 만들고 여기에 값을 넣은 후에 dataLine 문자열에서 지정한 구분자(delimiter “,” - 콤마)로 분리해 값을 출력하는 예제 입니다.
말이 길었나요? ^_^;;; 주의 깊게 보실 부분은 File.ReadAllLines 부분입니다.
다음 과정으로 파일 삭제 과정을 진행해 보도록 하겠습니다.
파일 삭제 처리
@{
bool deleteSuccess = false;
var photoName = "";
if (IsPost)
{
photoName = Request["photoFileName"] + ".jpg";
var fullPath = Path.Combine(Request.PhysicalApplicationPath + @"images\", photoName);
if (File.Exists(fullPath))
{
File.Delete(fullPath);
deleteSuccess = true;
}
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>사진 파일 삭제</title>
</head>
<body>
<h1>사이트에서 파일을 삭제합니다.</h1>
<form name="deletePhoto" action="" method="post">
<p>지울 사진 파일의 이름을 .jpg 확장자를 빼고 적으세요. :
<input name="photoFileName" type="text" value="" />
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
@if(deleteSuccess)
{
<p> @photoName 파일이 삭제 되었습니다.! </p>
}
</body>
</html>
Del.cshtml 파일로 저장합니다.
웹사이트 루트 폴더 (아마도 문서 하위에 “My Web Sites\WebSite1\” 기본 폴더일겁니다.) 하위에 images 라는 폴더를 만들어 주세요. 아무 jpg 파일을 만들거나 복사합니다.(확장자가 꼭 jpg 이어야 합니다.)
실행하시고 이 images 폴더에 확장자 .jpg를 빼고 이름만 적으면 됩니다.
마찬가지로, “File.Delete” 을 주의해서 보시길 바랍니다. ^_^ 쉽지요~ 넵~ 쉽습니다. ^_^
다음으로 파일 업로드 과정에 대해서 알아 보도록 하겠습니다.
파일 업로드 (여러 파일 업로드)
@{
var fileName = "";
if (IsPost) {
var fileSavePath = "";
var uploadedFile = Request.Files[0];
fileName = Path.GetFileName(uploadedFile.FileName);
fileSavePath = Server.MapPath("~/App_Data/UploadedFiles/" +
fileName);
uploadedFile.SaveAs(fileSavePath);
}
}
<!DOCTYPE html>
<html>
<head>
<title>파일 업로드 예제</title>
</head>
<body>
<h1>파일을 업로드 하는 예제 입니다.</h1>
@FileUpload.GetHtml(
initialNumberOfFiles:1,
allowMoreFilesToBeAdded:false,
includeFormTag:true,
uploadText:"업로드")
@if (IsPost) {
<span>파일 업로드가 완료 되었습니다!</span><br/>
}
</body>
</html>
FileUpload.cshtml 파일로 저장하고, 웹사이트 루트에 위치하고 있는 App_Data 폴더 하위에 UploadedFiles 폴더를 만들어 두세요. 그리고 실행해 보시면 파일 업로드 처리가 되는 것을 확인 가능합니다.
기존에 웹 개발을 해 오신 분들은 아마 느끼실지 모르겠습니다. 업로드 처리가 뭔가 더 쉽고 한 줄의 코드로 처리 되지요? 바로 Upload Helper 입니다.
Helper에 대한 간략한 소개
Helper는 Razor의 가장 큰 혁신 기능 중의 하나로 복잡한 코드 블록이나 기능을 모듈화 시키는 기능입니다. 보시면 Upload 기능도 속성값들만 적는 것으로 우리가 익히 아는 업로드 폼이 자동 완성되지요.(뒤의 강좌에서 아주 상세히 풀어 보겠습니다.)
Helper를 통해 업로드를 하게 되면 Request.Files 개체가 이 요청을 받게 됩니다.
var uploadedFile = Request.Files[0];
이 부분이지요. 뒤의 오디널(Ordinal) 번호는 첫 번째 업로드 된 파일 번호이며 0번부터 시작하게 됩니다. 여러 개의 파일을 받게 되면 후속 번호는 0 다음으로 이어서 1, 2, 3 이런 식으로 받아서 처리 가능해 지지요.(여러 개의 파일 업로드 – Multiple file upload 역시 쉽게 가능합니다.) 이어서 GetFileName으로 파일 이름만 저장하고 MapPath 로 서버의 /App_Data/UploadedFiles 폴더 하위에 파일이 저장되는 것이지요.
끝으로 여러 개의 파일 업로드는 예제 정도만 소개해 드리도록 하겠습니다.
여러 파일 업로드(Multiple file upload)
@{
var message = "";
if (IsPost) {
var fileName = "";
var fileSavePath = "";
int numFiles = Request.Files.Count;
message = "파일 업로드 완료. 전체 업로드 파일 수 : " +
numFiles.ToString();
for(int i =0; i < numFiles; i++) {
var uploadedFile = Request.Files[i];
fileName = Path.GetFileName(uploadedFile.FileName);
fileSavePath = Server.MapPath("~/App_Data/UploadedFiles/" +
fileName);
uploadedFile.SaveAs(fileSavePath);
}
}
}
<!DOCTYPE html>
<html>
<head><title>여러 파일 업로드</title></head>
<body>
<form id="myForm" method="post"
enctype="multipart/form-data"
action="">
<div>
<h1>여러 파일 업로드 예제</h1>
@if (!IsPost) {
@FileUpload.GetHtml(
initialNumberOfFiles:2,
allowMoreFilesToBeAdded:true,
includeFormTag:true,
addText:"업로드 파일 추가",
uploadText:"업로드")
}
<span>@message</span>
</div>
</form>
</body>
</html>
FileUploadMultiple.cshtml 파일로 저장하고 실행해 보세요. Helper의 설정대로 2개의 기본 업로드 파일이 가능하며, “업로드 파일 추가”를 클릭해 업로드 할 파일 수를 동적으로 늘릴 수 있습니다.
위의 Post 처리에서는 파일의 수 만큼 루프를 돌면서 처리하는 것을 확인 가능하지요.
이렇게 해서 간단히 파일 작업에 대해서 알아 보았습니다.
파일에 대한 기본 작업과 업로드 작업 모두 어렵지 않으셨을 거에요. 특히, Helper의 경우 Razor의 장점을 아주 잘 보여주는 녀석이고, 업로드 Helper만 봐도 참 쉽제 잘 만들었다고 느껴지실 거에요. Razor의 특징이 이런 쉬운 개발이 아닐까 생각합니다.
다음 강좌는 많은 분들이 기다리고 계시지요? (8) Razor 강좌 - 데이터베이스 처리 강좌에서 인사 드리도록 하겠습니다.
도움 되시길 바랍니다.
참고자료 :
(1) WebMatrix와 Razor! 이제 시작합니다.
(2) WebMatrix 설치부터 Hello World까지
(3) Razor 강좌 - 기본 구문 및 주석 처리
(4) Razor 강좌 - 코드 블록과 POST 처리
(5) Razor 강좌 - 재사용 가능한 코드 생성
(6) Razor 강좌 - 레이아웃 페이지 구조 처리
[동영상 강좌] (1) WebMatrix 첫 실행 & Hello World까지 달려요~
[동영상 강좌] (2) WebMatrix 5분 리뷰~
[동영상 강좌] (3) Razor 강좌 - 기본 구문 및 주석 처리
[동영상 강좌] (4) Razor 강좌 - 코드 블록과 POST 처리