[파일업로드] <form> 방식

사용자로부터 입력받은 파일을 서버로 보내는 방법은 크게 두가지가 있다. <form> 태그를 이용한 전송과 Ajax 방식이다. <form> 방식은 <input> 태그를 이용하여 사용자로부터 파일을 선택하게 하고 form.submit() 을 통해 서버로 전송하는 방식이다. Ajax 방식은 사용자가 선택한 파일을 XMLHttpRequest 에 실어서 서버에 보내는 방식이다. 

 

이 포스팅에서는 <form> 을 사용하는 방식을 다뤄본다.

 

<form id="form1" action="uploadForm" method="post" enctype="multipart/form-data" target="repacatFrame">
    <input type="file" name="file">
    <input type="submit">
</form>

 

 

파일 전송을 위한 <form> 의 모양은 대략 위와 같다. 화면상에는 아래와 같이 나온다.

 

 

파일전송 form 에서 주의해서 설정해야할 attribute 는 바로 entype 이다. 

 

w3schools 에는 아래와 같이 설명이 나온다. enctype attribute 가 가질 수 있는 값은 3개인데, <form> 내에 <input type="file"> 이 있을 경우 "multipart/form-data" 로 지정해줘야 한다. 지정하지 않을 경우 "application/x-www-form-urlencoded" 가 default 로 설정된다.

 

enctype

application/x-www-form-urlencoded multipart/form-data text/plain

Specifies how the form-data should be encoded when submitting it to the server (only for method="post")

 

 

한가지 더 알아야 할 attribute 는 target 이다. 

 

target

_blank _self _parent _top

Specifies where to display the response that is received after submitting the form

 

target 속성은 <form> 이 submit 되고 난 뒤 서버로부터 받는 response 를 표시할 대상을 지정하는 것이다. default 로 <form> 이 포함된 문서이며 이 때문에 <form> 을 전송한 후에는 화면 전체가 서버에서 받은 response 로 리프레시 된다. <form> 에 target 을 <iframe> 으로 지정함으로써 화면 전체 갱신을 하지 않을 수 있다. 

 

위의 <form> 에서는 "repacatFrame" 이라는 iframe 을 지정함으로써 response 가 iframe 으로 전달된다. 서버에서 아래와 같은 response 를 생성하여 부모 layer 의 함수를 호출할 수 있다.

 

<script>
var result = '${savedName}';
parent.addFilePath(result);
</script>