[ASP.NET Core] 파일 업로드 기능 구현 (ajax, 멀티)

ASP.NET Core 프로젝트를 만들고 뷰페이지, 컨트롤러에 간단히 몇줄 추가하면 파일 업로드를 할 수 있다.

업로드한 파일은 컴퓨터/서버 내의 원하는 경로에 저장할 수 있다.

 

간단히 HTML(cshtml)코드, C# 코드 2개의 파일만 수정하면 일단 잘 되는 것 같다.

업로드 파일 최대 크기에 관한 문제는 iis 설정을 좀 봐야 될 것 같다.

 

 

Index.cshtml 페이지 내용 추가

ajax를 이용한 여러 파일을 업로드 하는 기능이다.

프로젝트를 만들면 굳이 추가하지 않아도 jQuery가 추가되어 있어서 이 글에서는 따로 추가하지 않았다.

파일을 여러개 선택하여 업로드 할 수 있도록 input 태그에 multiple 속성을 추가했다.

<input type="file" id="uploadFile" multiple/>
<button id="uploadButton">upload</button>

<script>
    $(function () {
        $("#uploadButton").click(function () {
            if ($("#uploadFile").val() === "") {
                alert("File is empty.");
                return;
            }
            var formData = new FormData();
            $.each(document.querySelector("#uploadFile").files, function (i, item) {
                formData.append("files", item);
            });
            $.ajax({
                type: "POST",
                url: "Home/UploadFiles",
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data === "Success") $("#uploadFile").val("");
                    else alert(data);
                }
            })
        });
    });
</script>

 

HomeController.cs에 UploadFiles 추가

d드라이브에 upload 폴더를 만들고 진행한다고 가정한다.

업로드 폴더에 동일한 이름의 파일이 있다면 (1), 또 있으면 (2) 이런식으로 번호를 계속 올리는 방식이다.

이 중복이 많아질수록 while문이 많이 반복되기 때문에 약간의 시간이 늘어난다.

public IActionResult UploadFiles(List<IFormFile> files)
{
    var uploadPath = "d:\\upload";
    var response = "";
    var count = 0;
    try
    {
        files.ForEach(file => {
            var filePath = System.IO.Path.Combine(uploadPath, file.FileName);
            var k = 1;

            while (System.IO.File.Exists(filePath))
            {
                var name = file.FileName.Substring(0, file.FileName.LastIndexOf("."));
                var ext = file.FileName.Substring(file.FileName.LastIndexOf(".") + 1);
                filePath = System.IO.Path.Combine(uploadPath, $"{name} ({k++}).{ext}");
            }
            using (var uploadFile = System.IO.File.Create(filePath))
            {
                file.CopyTo(uploadFile);
            }
            count++;
        });
        response = $"{count} files are uploaded.";
    }
    catch(Exception ex)
    {
        response = ex.Message;
    }
            
    return Json(response);
}