ASP.NET 웹 페이지(Razor) 사이트에서 파일 작업

Tom FitzMacken

이 문서에서는 ASP.NET 웹 페이지(Razor) 사이트에서 파일을 읽고, 쓰고, 추가하고, 삭제하고, 업로드하는 방법을 설명합니다.

참고

이미지를 업로드하고 조작하려는 경우(예: 대칭 이동 또는 크기 조정) ASP.NET 웹 페이지 사이트에서 이미지 작업을 참조하세요.

학습할 내용:

  • 텍스트 파일을 만들고 해당 파일에 데이터를 쓰는 방법
  • 기존 파일에 데이터를 추가하는 방법입니다.
  • 파일을 읽고 파일을 표시하는 방법입니다.
  • 웹 사이트에서 파일을 삭제하는 방법
  • 사용자가 파일 하나 또는 여러 파일을 업로드할 수 있도록 하는 방법

다음은 문서에 도입된 ASP.NET 프로그래밍 기능입니다.

  • File 파일을 관리하는 방법을 제공하는 개체입니다.
  • 도우미입니다 FileUpload .
  • Path 경로 및 파일 이름을 조작할 수 있는 메서드를 제공하는 개체입니다.

자습서에서 사용되는 소프트웨어 버전

  • ASP.NET 웹 페이지(Razor) 2
  • WebMatrix 2

이 자습서는 WebMatrix 3에서도 작동합니다.

텍스트 파일 만들기 및 데이터 쓰기

웹 사이트에서 데이터베이스를 사용하는 것 외에도 파일을 사용할 수 있습니다. 예를 들어 사이트의 데이터를 저장하는 간단한 방법으로 텍스트 파일을 사용할 수 있습니다. (데이터를 저장하는 데 사용되는 텍스트 파일을 플랫 파일이라고도 합니다.) 텍스트 파일은 .txt,.xml또는 .csv(쉼표로 구분된 값)과 같은 다양한 형식일 수 있습니다.

텍스트 파일에 데이터를 저장하려는 경우 메서드를 File.WriteAllText 사용하여 만들 파일과 쓸 데이터를 지정할 수 있습니다. 이 절차에서는 세 input 가지 요소(이름, 성 및 전자 메일 주소)와 제출 단추가 있는 간단한 양식이 포함된 페이지를 만듭니다. 사용자가 양식을 제출하면 사용자의 입력을 텍스트 파일에 저장합니다.

  1. 아직 없는 경우 App_Data 라는 새 폴더를 만듭니다.

  2. 웹 사이트의 루트에서 UserData.cshtml이라는 새 파일을 만듭니다.

  3. 기존 콘텐츠를 다음으로 바꿉다.

    @{
        var result = "";
        if (IsPost)
        {
            var firstName = Request["FirstName"];
            var lastName = Request["LastName"];
            var email = Request["Email"];
    
            var userData = firstName + "," + lastName +
                "," + email + Environment.NewLine;
    
            var dataFile = Server.MapPath("~/App_Data/data.txt");
            File.WriteAllText(@dataFile, userData);
            result = "Information saved.";
        }
    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>Write Data to a File</title>
    </head>
    <body>
        <form id="form1" method="post">
        <div>
            <table>
                <tr>
                    <td>First Name:</td>
                    <td><input id="FirstName" name="FirstName" type="text" /></td>
    
                </tr>
                <tr>
                    <td>Last Name:</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: @result</p>
        }
        </div>
        </form>
    </body>
    </html>
    

    HTML 태그는 세 개의 텍스트 상자가 있는 양식을 만듭니다. 코드에서 속성을 사용하여 IsPost 처리를 시작하기 전에 페이지가 제출되었는지 여부를 확인합니다.

    첫 번째 작업은 사용자 입력을 가져와 변수에 할당하는 것입니다. 그런 다음, 코드는 별도의 변수의 값을 쉼표로 구분된 문자열 하나에 연결한 다음 다른 변수에 저장합니다. 쉼표 구분 기호는 문자 그대로 만드는 큰 문자열에 쉼표를 포함하므로 따옴표(",")에 포함된 문자열입니다. 함께 연결하는 데이터의 끝에 를 추가 Environment.NewLine합니다. 줄 바꿈(줄 바꿈 문자)이 추가됩니다. 이 모든 연결을 사용하여 만드는 것은 다음과 같은 문자열입니다.

    David,Jones,davidj@contoso.com
    

    (끝에 보이지 않는 줄 바꿈이 있습니다.)

    그런 다음 데이터를 저장할 파일의 위치와 이름을 포함하는 변수(dataFile)를 만듭니다. 위치를 설정하려면 특별한 처리가 필요합니다. 웹 사이트에서는 코드에서 웹 서버의 파일에 대한 C:\Folder\File.txt 같은 절대 경로를 참조하는 것은 좋지 않습니다. 웹 사이트를 이동하면 절대 경로가 잘못됩니다. 또한 호스트된 사이트의 경우(사용자 컴퓨터가 아닌) 일반적으로 코드를 작성할 때 올바른 경로가 무엇인지도 모릅니다.

    그러나 때로는 (지금처럼 파일을 작성하기 위해) 완전한 경로가 필요합니다. 해결 방법은 개체의 MapPath 메서드를 사용하는 것입니다 Server . 그러면 웹 사이트의 전체 경로가 반환됩니다. 웹 사이트 루트에 대한 경로를 얻으려면 연산자를 ~ 로 사용자 지정합니다(사이트의 가상 루트를 다시 사용) MapPath. 하위 폴더 이름(예: ~/App_Data/)을 전달하여 해당 하위 폴더의 경로를 가져올 수도 있습니다. 그런 다음, 메서드가 반환하는 모든 항목에 추가 정보를 연결하여 전체 경로를 만들 수 있습니다. 이 예제에서는 파일 이름을 추가합니다. (Razor 구문을 사용하여 ASP.NET 웹 페이지 프로그래밍 소개에서 파일 및 폴더 경로를 사용하는 방법에 대해 자세히 알아볼 수 있습니다.)

    파일은 App_Data 폴더에 저장됩니다. 이 폴더는 ASP.NET 웹 페이지 사이트에서 데이터베이스 작업 소개에 설명된 대로 데이터 파일을 저장하는 데 사용되는 ASP.NET 특수 폴더입니다.

    개체의 메서드는 WriteAllTextFile 데이터를 파일에 씁니다. 이 메서드는 쓸 파일의 이름(경로 포함)과 쓸 실제 데이터라는 두 개의 매개 변수를 사용합니다. 첫 번째 매개 변수 @ 의 이름에는 접두사로 문자가 있습니다. 이는 ASP.NET 축자 문자열 리터럴을 제공하고 있으며 "/"와 같은 문자는 특별한 방식으로 해석되어서는 안 된다는 것을 알려줍니다. 자세한 내용은 Razor 구문을 사용하여 ASP.NET 웹 프로그래밍 소개를 참조하세요.

    참고

    코드가 App_Data 폴더에 파일을 저장하려면 애플리케이션에 해당 폴더에 대한 읽기-쓰기 권한이 필요합니다. 개발 컴퓨터에서 일반적으로 문제가 되지 않습니다. 그러나 호스팅 공급자의 웹 서버에 사이트를 게시하는 경우 해당 권한을 명시적으로 설정해야 할 수 있습니다. 호스팅 공급자의 서버에서 이 코드를 실행하고 오류가 발생하면 호스팅 공급자와 검사 해당 권한을 설정하는 방법을 알아보세요.

  • 브라우저에서 페이지를 실행합니다.

    이름, 성 및 Email 텍스트 필드와 제출 단추를 차례로 보여 주는 브라우저 창의 스크린샷

  • 필드에 값을 입력한 다음 제출을 클릭합니다.

  • 브라우저를 닫습니다.

  • 프로젝트로 돌아가서 보기를 새로 고칩니다.

  • data.txt 파일을 엽니다. 양식에서 제출한 데이터는 파일에 있습니다.

    웹 브라우저 필드에 입력된 데이터가 t x t 파일에 기록되었음을 보여 주는 데이터 dot t x t 파일의 스크린샷.

  • data.txt 파일을 닫습니다.

기존 파일에 데이터 추가

이전 예제에서는 한 부분의 데이터만 포함된 텍스트 파일을 만드는 데 사용 WriteAllText 했습니다. 메서드를 다시 호출하고 동일한 파일 이름을 전달하면 기존 파일을 완전히 덮어씁니다. 그러나 파일을 만든 후에는 파일 끝에 새 데이터를 추가하려는 경우가 많습니다. 개체의 File 메서드를 AppendAllText 사용하여 이 작업을 수행할 수 있습니다.

  1. 웹 사이트에서 UserData.cshtml 파일의 복사본을 만들고 복사본 이름을 UserDataMultiple.cshtml로 지정합니다.

  2. <!DOCTYPE html> 는 태그 앞의 코드 블록을 다음 코드 블록으로 바꿉 있습니다.

    @{
        var result = "";
        if (IsPost)
        {
            var firstName = Request["FirstName"];
            var lastName = Request["LastName"];
            var email = Request["Email"];
    
            var userData = firstName + "," + lastName +
                "," + email + Environment.NewLine;
    
            var dataFile = Server.MapPath("~/App_Data/data.txt");
            File.AppendAllText (@dataFile, userData);
            result = "Information saved.";
        }
    }
    

    이 코드는 이전 예제와 한 가지 변경 내용이 있습니다. 를 사용하는 WriteAllText대신 메서드를 사용합니다 the AppendAllText . 메서드는 파일의 끝에 데이터를 추가하는 것을 AppendAllText 제외하고는 유사합니다. 와 WriteAllTextAppendAllText 마찬가지로 는 파일이 아직 없는 경우 파일을 만듭니다.

  3. 브라우저에서 페이지를 실행합니다.

  4. 필드에 대한 값을 입력한 다음 제출을 클릭합니다.

  5. 더 많은 데이터를 추가하고 양식을 다시 제출합니다.

  6. 프로젝트로 돌아가서 프로젝트 폴더를 마우스 오른쪽 단추로 클릭한 다음 새로 고침을 클릭합니다.

  7. data.txt 파일을 엽니다. 이제 방금 입력한 새 데이터가 포함됩니다.

    웹 브라우저 필드에 입력된 데이터가 이전 데이터를 덮어쓰지 않고 기록되었음을 보여 주는 데이터 dot t x t 파일의 스크린샷.

파일에서 데이터 읽기 및 표시

텍스트 파일에 데이터를 쓸 필요가 없더라도 한 파일에서 데이터를 읽어야 하는 경우가 있습니다. 이렇게 하려면 개체를 File 다시 사용할 수 있습니다. 개체를 File 사용하여 각 줄을 개별적으로 읽거나(줄 바꿈으로 구분) 개별 항목을 분리하는 방법에 관계없이 읽을 수 있습니다.

이 절차에서는 이전 예제에서 만든 데이터를 읽고 표시하는 방법을 보여줍니다.

  1. 웹 사이트의 루트에서 DisplayData.cshtml이라는 새 파일을 만듭니다.

  2. 기존 콘텐츠를 다음으로 바꿉다.

    @{
        var result = "";
        Array userData = null;
        char[] delimiterChar = {','};
    
        var dataFile = Server.MapPath("~/App_Data/data.txt");
    
        if (File.Exists(dataFile)) {
            userData = File.ReadAllLines(dataFile);
            if (userData == null) {
                // Empty file.
                result = "The file is empty.";
            }
        }
        else {
            // File does not exist.
            result = "The file does not exist.";
        }
    }
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Reading Data from a File</title>
    </head>
    <body>
        <div>
            <h1>Reading Data from a File</h1>
            @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>
    

    코드는 다음 메서드 호출을 사용하여 이전 예제에서 만든 파일을 라는 userData변수로 읽는 것으로 시작합니다.

    File.ReadAllLines(dataFile)
    

    이 작업을 수행하는 코드는 문 내에 있습니다 if . 파일을 읽으려는 경우 메서드를 사용하여 File.Exists 파일을 사용할 수 있는지 여부를 먼저 확인하는 것이 좋습니다. 또한 코드는 파일이 비어 있는지 여부를 확인합니다.

    페이지의 본문에는 두 개의 foreach 루프가 포함되며, 하나는 다른 루프 안에 중첩되어 있습니다. 외부 foreach 루프는 데이터 파일에서 한 번에 한 줄을 가져옵니다. 이 경우 줄은 파일의 줄 바꿈으로 정의됩니다. 즉, 각 데이터 항목이 자체 줄에 있습니다. 외부 루프는 정렬된 목록( 요소) 내에 새 항목(<li><ol> 요소)을 만듭니다.

    내부 루프는 구분 기호로 쉼표로 사용하여 각 데이터 줄을 항목(필드)으로 분할합니다. (이전 예제에 따라 각 줄에는 이름, 성 및 전자 메일 주소, 각각 쉼표로 구분된 세 개의 필드가 포함됩니다.) 또한 내부 루프는 <ul> 목록을 만들고 데이터 줄의 각 필드에 대해 하나의 목록 항목을 표시합니다.

    이 코드는 배열과 데이터 형식의 두 데이터 형식을 사용하는 방법을 보여 줍니다 char . 메서드가 데이터를 배열로 반환하기 File.ReadAllLines 때문에 배열이 필요합니다. 메서드는 char 각 요소가 형식인 를 array 반환하기 때문에 Split 데이터 형식char이 필요합니다. 배열에 대한 자세한 내용은 Razor 구문을 사용하여 ASP.NET 웹 프로그래밍 소개를 참조하세요.

  3. 브라우저에서 페이지를 실행합니다. 이전 예제에 대해 입력한 데이터가 표시됩니다.

    배열에 표시된 데이터 dot t x t 파일의 데이터 데이터를 보여 주는 브라우저 창의 스크린샷

Microsoft Excel Comma-Delimited 파일의 데이터 표시

Microsoft Excel을 사용하여 스프레드시트에 포함된 데이터를 쉼표로 구분된 파일(.csv 파일)로 저장할 수 있습니다. 이렇게 하면 파일이 Excel 형식이 아닌 일반 텍스트로 저장됩니다. 스프레드시트의 각 행은 텍스트 파일의 줄 바꿈으로 구분되고 각 데이터 항목은 쉼표로 구분됩니다. 이전 예제에 표시된 코드를 사용하여 코드에서 데이터 파일의 이름을 변경하는 것만으로 Excel 쉼표로 구분된 파일을 읽을 수 있습니다.

파일 삭제

웹 사이트에서 파일을 삭제하려면 메서드를 File.Delete 사용할 수 있습니다. 이 절차에서는 사용자가 파일의 이름을 알고 있는 경우 이미지 폴더에서 이미지(.jpg 파일)를 삭제하도록 하는 방법을 보여 줍니다.

참고

중요 프로덕션 웹 사이트에서는 일반적으로 데이터를 변경할 수 있는 사용자를 제한합니다. 멤버 자격을 설정하는 방법과 사용자가 사이트에서 작업을 수행할 수 있도록 권한을 부여하는 방법에 대한 자세한 내용은 ASP.NET 웹 페이지 사이트에 보안 및 멤버 자격 추가를 참조하세요.

  1. 웹 사이트에서 images라는 하위 폴더를 만듭니다.

  2. 하나 이상의 .jpg 파일을 images 폴더에 복사합니다.

  3. 웹 사이트의 루트에서 FileDelete.cshtml이라는 새 파일을 만듭니다.

  4. 기존 콘텐츠를 다음으로 바꿉다.

    @{
        bool deleteSuccess = false;
        var photoName = "";
        if (IsPost) {
            photoName = Request["photoFileName"] + ".jpg";
            var fullPath = Server.MapPath("~/images/" + photoName);
    
            if (File.Exists(fullPath))
            {
                    File.Delete(fullPath);
                    deleteSuccess = true;
            }
        }
    }
    <!DOCTYPE html>
    <html>
      <head>
        <title>Delete a Photo</title>
      </head>
      <body>
        <h1>Delete a Photo from the Site</h1>
        <form name="deletePhoto" action="" method="post">
          <p>File name of image to delete (without .jpg extension):
          <input name="photoFileName" type="text" value="" />
          </p>
          <p><input type="submit" value="Submit" /></p>
        </form>
    
        @if(deleteSuccess) {
            <p>
            @photoName deleted!
            </p>
            }
      </body>
    </html>
    

    이 페이지에는 사용자가 이미지 파일의 이름을 입력할 수 있는 양식이 포함되어 있습니다. 파일 이름 확장명은 .jpg 입력하지 않습니다. 이와 같은 파일 이름을 제한하면 사용자가 사이트에서 임의 파일을 삭제하지 못하도록 방지할 수 있습니다.

    코드는 사용자가 입력한 파일 이름을 읽은 다음 전체 경로를 생성합니다. 경로를 만들기 위해 코드는 현재 웹 사이트 경로(메서드에서 Server.MapPath 반환됨), images 폴더 이름, 사용자가 제공한 이름 및 ".jpg"을 리터럴 문자열로 사용합니다.

    파일을 삭제하기 위해 코드는 메서드를 File.Delete 호출하여 방금 생성한 전체 경로를 전달합니다. 태그의 끝에 파일이 삭제되었다는 확인 메시지가 코드에 표시됩니다.

  5. 브라우저에서 페이지를 실행합니다.

    파일 이름 및 제출 단추에 대한 필드가 있는 사이트 페이지에서 사진 삭제를 보여 주는 브라우저 창의 스크린샷.

  6. 삭제할 파일의 이름을 입력한 다음 제출을 클릭합니다. 파일이 삭제된 경우 파일 이름이 페이지 아래쪽에 표시됩니다.

사용자가 파일을 업로드하도록 허용

도우미를 FileUpload 사용하면 사용자가 웹 사이트에 파일을 업로드할 수 있습니다. 아래 절차에서는 사용자가 단일 파일을 업로드하도록 하는 방법을 보여줍니다.

  1. 이전에 추가하지 않은 경우 ASP.NET 웹 페이지 사이트에 도우미 설치에 설명된 대로 웹 사이트에 ASP.NET 웹 도우미 라이브러리를 추가합니다.

  2. App_Data 폴더에서 새 폴더를 만들고 이름을 UploadedFiles로 지정합니다.

  3. 루트에서 FileUpload.cshtml이라는 새 파일을 만듭니다.

  4. 페이지의 기존 콘텐츠를 다음으로 바꿉다.

    @using Microsoft.Web.Helpers;
    @{
        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>FileUpload - Single-File Example</title>
        </head>
        <body>
        <h1>FileUpload - Single-File Example</h1>
        @FileUpload.GetHtml(
            initialNumberOfFiles:1,
            allowMoreFilesToBeAdded:false,
            includeFormTag:true,
            uploadText:"Upload")
        @if (IsPost) {
            <span>File uploaded!</span><br/>
        }
        </body>
    </html>
    

    페이지의 본문 부분은 도우미를 FileUpload 사용하여 익숙한 업로드 상자와 단추를 만듭니다.

    파일 업로드 도우미 파일 선택기 및 업로드 단추를 보여 주는 파일 업로드 웹 브라우저 페이지의 스크린샷

    도우미에 대해 FileUpload 설정한 속성은 파일을 업로드할 단일 상자를 지정하고 제출 단추가 업로드를 읽도록 지정합니다. (문서 뒷부분에서 더 많은 상자를 추가합니다.)

    사용자가 업로드를 클릭하면 페이지 맨 위에 있는 코드가 파일을 가져오고 저장합니다. Request 양식 필드에서 값을 가져오는 데 일반적으로 사용하는 개체에는 Files 업로드된 파일(또는 파일)이 포함된 배열도 있습니다. 배열의 특정 위치에서 개별 파일을 가져올 수 있습니다. 예를 들어 첫 번째 업로드된 파일을 가져오기 위해 를 가져와 Request.Files[0]서 두 번째 파일을 가져오는 등의 작업을 수행할 수 Request.Files[1]있습니다. (프로그래밍에서 계산은 일반적으로 0부터 시작됩니다.)

    업로드된 파일을 가져올 때 이를 조작할 수 있도록 변수(여기, uploadedFile)에 넣습니다. 업로드된 파일의 이름을 확인하려면 해당 FileName 속성만 가져옵니다. 그러나 사용자가 파일을 FileName 업로드할 때 에는 전체 경로를 포함하는 사용자의 원래 이름이 포함됩니다. 다음과 같이 보일 수 있습니다.

    C:\Users\Public\Sample.txt

    하지만 서버가 아니라 사용자 컴퓨터의 경로이기 때문에 모든 경로 정보를 원하지는 않습니다. 실제 파일 이름(Sample.txt)만 있으면 됩니다. 다음과 같이 메서드를 사용하여 Path.GetFileName 경로에서 파일만 제거할 수 있습니다.

    Path.GetFileName(uploadedFile.FileName)
    

    개체는 Path 경로 제거, 경로 결합 등에 사용할 수 있는 다음과 같은 여러 메서드가 있는 유틸리티입니다.

    업로드된 파일의 이름을 얻은 후에는 업로드된 파일을 웹 사이트에 저장할 새 경로를 빌드할 수 있습니다. 이 경우 , 폴더 이름(App_Data/UploadedFiles) 및 새로 제거된 파일 이름을 결합하여 Server.MapPath새 경로를 만듭니다. 그런 다음 업로드된 파일의 SaveAs 메서드를 호출하여 실제로 파일을 저장할 수 있습니다.

  5. 브라우저에서 페이지를 실행합니다.

    파일 선택기와 업로드 단추를 보여 주는 파일 업로드 단일 파일 예제 웹 브라우저 페이지의 스크린샷

  6. 찾아보기를 클릭한 다음 업로드할 파일을 선택합니다.

    파란색으로 선택되고 강조 표시된 파일과 파란색 사각형으로 강조 표시된 열기 단추를 보여 주는 파일 탐색기 창의 스크린샷

    찾아보기 단추 옆에 있는 텍스트 상자에는 경로 및 파일 위치가 포함됩니다.

    선택한 파일과 업로드 단추가 있는 파일 선택기를 보여 주는 파일 업로드 단일 파일 예제 웹 브라우저 페이지의 스크린샷

  7. 업로드를 클릭합니다.

  8. 웹 사이트에서 프로젝트 폴더를 마우스 오른쪽 단추로 클릭한 다음 새로 고침을 클릭합니다.

  9. UploadedFiles 폴더를 엽니다. 업로드한 파일이 폴더에 있습니다.

    업로드된 파일 폴더 내에서 파란색으로 강조 표시된 Samples dot t x t 파일을 보여 주는 프로젝트 폴더 계층 구조의 스크린샷

사용자가 여러 파일을 업로드하도록 허용

이전 예제에서는 사용자가 하나의 파일을 업로드하도록 허용합니다. 그러나 도우미를 FileUpload 사용하여 한 번에 둘 이상의 파일을 업로드할 수 있습니다. 한 번에 하나의 파일을 업로드하는 것이 지루한 사진 업로드와 같은 시나리오에 편리합니다. (ASP.NET 웹 페이지 사이트의 이미지 작업에서 사진 업로드에 대해 읽을 수 있습니다.) 이 예제에서는 동일한 기술을 사용하여 그 이상을 업로드할 수 있지만 사용자가 한 번에 두 개를 업로드하도록 하는 방법을 보여줍니다.

  1. 아직 ASP.NET 웹 페이지 사이트에 도우미 설치에 설명된 대로 웹 사이트에 ASP.NET 웹 도우미 라이브러리를 추가합니다.

  2. FileUploadMultiple.cshtml이라는 새 페이지를 만듭니다.

  3. 페이지의 기존 콘텐츠를 다음으로 바꿉다.

    @using Microsoft.Web.Helpers;
    @{
      var message = "";
      if (IsPost) {
          var fileName = "";
          var fileSavePath = "";
          int numFiles = Request.Files.Count;
          int uploadedCount = 0;
          for(int i =0; i < numFiles; i++) {
              var uploadedFile = Request.Files[i];
              if (uploadedFile.ContentLength > 0) {
                  fileName = Path.GetFileName(uploadedFile.FileName);
                  fileSavePath = Server.MapPath("~/App_Data/UploadedFiles/" +
                    fileName);
                  uploadedFile.SaveAs(fileSavePath);
                  uploadedCount++;
              }
           }
           message = "File upload complete. Total files uploaded: " +
             uploadedCount.ToString();
       }
    }
    <!DOCTYPE html>
    <html>
        <head><title>FileUpload - Multiple File Example</title></head>
    <body>
        <form id="myForm" method="post"
           enctype="multipart/form-data"
           action="">
        <div>
        <h1>File Upload - Multiple-File Example</h1>
        @if (!IsPost) {
            @FileUpload.GetHtml(
                initialNumberOfFiles:2,
                allowMoreFilesToBeAdded:true,
                includeFormTag:true,
                addText:"Add another file",
                uploadText:"Upload")
            }
        <span>@message</span>
        </div>
        </form>
    </body>
    </html>
    

    이 예제 FileUpload 에서는 페이지 본문의 도우미가 사용자가 기본적으로 두 개의 파일을 업로드할 수 있도록 구성됩니다. 는 로 true설정되므로 allowMoreFilesToBeAdded 도우미는 사용자가 업로드 상자를 더 추가할 수 있는 링크를 렌더링합니다.

    파일 선택기 2개와 업로드 단추를 보여 주는 파일 업로드 다중 파일 예제 웹 브라우저 페이지의 스크린샷

    사용자가 업로드하는 파일을 처리하기 위해 코드는 이전 예제에서 사용한 것과 동일한 기본 기술을 사용합니다. 에서 파일을 Request.Files 가져와서 저장합니다. (올바른 파일 이름 및 경로를 가져오기 위해 수행해야 하는 다양한 작업을 포함합니다.) 이번에는 사용자가 여러 파일을 업로드할 수 있고 많은 파일을 모를 수 있다는 것이 혁신입니다. 알아보려면 를 가져올 Request.Files.Count수 있습니다.

    이 숫자를 사용하여 를 반복하여 Request.Files각 파일을 차례로 가져오고 저장할 수 있습니다. 컬렉션을 통해 알려진 횟수를 반복하려는 경우 다음과 같이 루프를 for 사용할 수 있습니다.

    for(int i =0; i < numFiles; i++) {
        var uploadedFile = Request.Files[i];
        if (uploadedFile.ContentLength > 0) {
            fileName = Path.GetFileName(uploadedFile.FileName);
    
        // etc.
    }
    

    변수 i 는 0에서 설정한 상한으로 이동하는 임시 카운터일 뿐입니다. 이 경우 상한은 파일 수입니다. 그러나 카운터는 ASP.NET 계산 시나리오에서 일반적인 것처럼 0부터 시작하므로 상한은 실제로 파일 수보다 1보다 적습니다. (3개의 파일이 업로드되면 개수는 0~2입니다.)

    변수는 uploadedCount 성공적으로 업로드되고 저장된 모든 파일을 합한 값입니다. 이 코드는 예상된 파일을 업로드하지 못할 수 있는 가능성을 설명합니다.

  4. 브라우저에서 페이지를 실행합니다. 브라우저에는 페이지와 두 개의 업로드 상자가 표시됩니다.

  5. 업로드할 두 개의 파일을 선택합니다.

  6. 다른 파일 추가를 클릭합니다. 페이지에 새 업로드 상자가 표시됩니다.

    선택한 파일과 업로드 단추가 있는 두 개의 파일 선택기를 보여 주는 파일 업로드 다중 파일 예제 웹 브라우저 페이지의 스크린샷.

  7. 업로드를 클릭합니다.

  8. 웹 사이트에서 프로젝트 폴더를 마우스 오른쪽 단추로 클릭한 다음 새로 고침을 클릭합니다.

  9. UploadedFiles 폴더를 열어 성공적으로 업로드된 파일을 확인합니다.

추가 리소스

ASP.NET 웹 페이지 사이트에서 이미지 작업

CSV 파일로 내보내기