dev/asp.net, c#

[c#] 파일 업로드 asp.net core, webform

코딩for 2020. 10. 6. 10:17
반응형

파일 업로드 작업시 자꾸 찾아보게 된다.

 

[대용량 업로드 설정 하기]

 

[asp.net core] 대용량 파일 업로드 사이즈 설정 (with IIS web.config 설정하기)

asp.net core, iis 에서 기본적으로 업로드 사이즈를 제한하면 사용하는 버전에 따라서 크기가 제한될수 있습니다. Asp.Net Core 설정 // Startup.cs // ConfigureServices()에 추가 services.Configure(options => { // 500 MB

askforyou.tistory.com

 

asp.net core3.1

IFormFile 인터페이스 형식으로  form으로  파일 데이터를  전달 받게 된다. 나머지는 웹폼이나 mvc 등 파일 업로드 구조는 비슷하다.

 

<script type="text/javascript">

function uploadfile() {

	var form = $('#uploadFrm')[0];
	// FormData 객체 생성
	var formData = new FormData(form);

	$.ajax({
		url: "/Home/Upload",
		data: formData,
		type: 'POST',
		enctype: 'multipart/form-data',
		processData: false,
		contentType: false,
		dataType: 'json',
		cache: false,
		success: function (result) {
			console.log(result)
		}
	});
}

</script>

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
         <form id="uploadFrm" enctype="multipart/form-data" method="post">
        <div>
            <input type="text" name="title" />
            <input type="file" name="files"/>
			<a onclick="uploadfile();">업로드</a>
        </div>
    </form>
</div>

 

[HttpPost]
public IActionResult Upload(List<IFormFile> files)
{
    long size = files.Sum(f => f.Length);
    var filePath = Path.GetTempFileName();
    foreach (var formFile in files)
    {
        if (formFile.Length > 0)
        {
            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                formFile.CopyTo(stream);
            }
        }
    }

    // process uploaded files
    // Don't rely on or trust the FileName property without validation.

    return Ok(new { count = files.Count, size, filePath });
}

 

asp.net webform

현재 운영중인 사이트 말고는 잘 안쓰게 된다.

 

uploadtest.aspx

<!-- file upload form -->
<form id="uploadFrm" enctype="multipart/form-data" method="post">
   <div>
       <input type="text" name="title" />
       <input type="file" name="uploadfile"/>
       <a onclick="uploadfile();">업로드</a>
   </div>
</form>

<script type="text/javascript">
function uploadfile() {
	var form = $('#uploadFrm')[0];          // 업로드 폼
	var formData = new FormData(form);  	// FormData 객체

    // ajax 로 form 데이터 객체를 업로드 할수 있도록 전송
	$.ajax({
		url: "FileUploadTest.aspx",
		data: formData,
		type: 'POST',
		enctype: 'multipart/form-data',
		processData: false,
		contentType: false,
		dataType: 'json',
		cache: false,
		success: function (result) {
			console.log(result)
		}
	});
}

</script>

 

FileUploadTest.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    var fileList = new List<FileResult>();
    var files = Request.Files;                     

    for (int i = 0; i < files.Count; i++)
    {
        var filename = files[i].FileName;
        if(!string.IsNullOrEmpty(filename))
        {
            var root = Server.MapPath("/");
            var sFilePath = root + "userUpload/userTemplate/";

            DirectoryInfo directoryInfo = new DirectoryInfo(sFilePath);
            if (!directoryInfo.Exists)
            {
                directoryInfo.Create();
            }

            var sOrderDt2 = DateTime.Now.ToString("yyyyMMddHHmmss");
            var sUniqueFileName = sOrderDt2 + "-" + filename;
            var fullPath = sFilePath + sUniqueFileName;

            files[i].SaveAs(fullPath);

            var tmpFile = new FileResult();
            tmpFile.fullPath = fullPath;
            tmpFile.result = true;
            fileList.Add(tmpFile);
        }
    }

    var jsonSerialize = JsonConvert.SerializeObject(fileList, Formatting.Indented);
    Response.Write(jsonSerialize);
}

 

form 으로 전송되는 파일은 Request.Files; 로 전달을 받으며 전달된 파일을 서버측 코드에서 Save() 를 이용하여 업로드 된 파일을 저장한다.

 

업로드가 완료되면 업로드 경로를 json 데이터로 응답한다.

 

 

[업로드 진행바(Progressbaar) 구현]

https://askforyou.tistory.com/182

 

반응형