파일 업로드 및 저장 - 01, html

개요

• 수작업으로 게시글처럼 보이도록 개행문자를 기준으로 나눠 <p>태그를 작성하던 중 우연히 위그지그 를 발견하게 되어 관련 에디터 CKEditor의 이미지 업로드를 구현하기 위해 공부한 파일 업로드 부분을 정리하기 위해 작성하게 되었다.

위지위그(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 이는 편집 명령어를 입력하여 글꼴이나 문장 형태를 바꾸는 방식과 구별된다.

---

• 간단한 예제를 통해 어떻게 동작하는지 알아보도록 한다.

html form enctype 속성(application/www-form-urlencoded)

<form action="FileUploadTest" method="post">
    작성자<input type="text" name="fileWriter"><br>
    파일<input type="file" name="fileName"><br>
    파일설명<br/><textarea name="fileDescription" rows="5" cols="30"></textarea><br/>
    <input type="submit" value="업로드">
</form>

• enctype은 폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩되는 방식을 지정하는 것으로, method 속성값이 'POST'인 경우에만 사용이 가능하고 기본값은 application/www-form-urlencoded가 된다
•  application/www-form-urlencoded은 모든 문자들은 서버로 보내기 전 인코딩 됨을 명시한다는 의미이다.

 

우선 enctype이 없는(enctype="application/www-form-urlencoded") 코드부터 살펴보자.

입력값으로는 아래의 값을 넘겨줄 예정이다.

fileWriter: "홍길동"
fileName: "error.PNG"
fileDescription: "홍길동은..."

 

 

• 데이터는 fileWriter=값&fileName=값&fileDescription=값 형식으로 넘어가게 된다.
• 값(홍길동, 홍길동은...)은 encoding되어 (오른쪽)%ED%99%8D... 으로 잘 넘어갔다.
• fileName은 error.PNG 문자열만 전송되어 서버에서는 파일의 이름밖에 확인할 수 없다.

 

서버에서 확인한 fileName 값

서버에서 fileName을 확인하면

파일 이름만 확인할 수 있는 모습이다. 서버에서 파일의 데이터를 확인할 수 없는 모습이다.

---

html form enctype 속성(multipart/form-data)

<form action="FileUploadTest" method="post" enctype="multipart/form-data">
	작성자<input type="text" name="fileWriter"><br>
	파일<input type="file" name="fileName"><br>
	파일설명<br/><textarea name="fileDescription" rows="5" cols="30"></textarea><br/><br/>
	<input type="submit" value="업로드">
</form>

• enctype의 속성값으로 "multipart/form-data"를 사용하면 모든 문자를 인코딩하지 않음을 명시한다는 뜻이다. 

 

enctype="multipart/form-data"를 설정하니 이전과는 전송 데이터가 달라진 모습이다. 문자열 데이터는 인코딩 하지않고, 파일데이터는 binary(이진) 데이터로 전송하는 모습이다.

 

--WebKitFormBoundary Content-Disposition: name... 속성값   binary값 -- 으로 전송되는 형태를 볼 수 있다. 위의 화면에서는 실제 binary값까지는 볼 수 없다.(파일의 값 부분은 공백으로 표현됨)

 

통신에 대해 조금만 생각한다면 이해할 수 있는 부분이다.

 

int(4byte), char(2byte) , double(8byte) 값을 전송한다고 했을 때 값을 받는쪽에서도 데이터를 구분할 시작과 끝을 알아야 0~4byte는 int로 해석, 5~6은 char로 해석 7~14까지는 double로 해석해서 값을 사용할 수 있을 것이다.

 

시작과 끝을 모른다면 0~2byte 부분만 해석해서 int로 사용하면 전혀 다른 값을 갖게 될 것이다.

파일의 크기가 엄청 커서 여러번 나눠서 전송해야하는 상황이 올 수 있고, 파일의 첫번째부터 끝을 제대로 해석해야하기 때문에 파일 데이터를 전송할 땐 enctype="multipart/form-data"를 지정해야한다.

---