파일 업로드 기능 구현(1) upload.html

글쓴이 /

아래 [그림1]과 같이 파일을 선택하는 폼을 하나 만들어 보겠습니다.
[찾아보기…]를 클릭하면 [그림2]와 같이 파일 선택 대화상자가 나타나야 하는 겁니다.

[그림1]
[그림2]

이 기능은 의외로 간단합니다.
우선 아래와 같이 입력하면 [그림1]과 같은 파일 선택 폼이 만들어집니다.

파일 이름은 upload.html로 합시다.

  1. <html>
  2. <head>
  3.    <title>PHP 파일 업로드 기능</title>
  4.    <meta http-equiv=”Content-Type” content=”text/html; charset=euc-kr”>
  5. </head>
  6. <body>
  7. <form method=”POST” ENCTYPE=”multipart/form-data” action=”upload_ok.php”>
  8. <table width=”500″ border=”0″ align=”center” bgcolor=”dddddd”>
  9.         <tr>
  10.                 <td width=”600″ colspan=”2″ align=”center”><b>파일 업로드 기능</b></td>
  11.         </tr>
  12.         <tr>
  13.                 <td width=”100″ align=”center”>파일명</td>
  14.                 <td width=”500″> <input type=”file” name=”upfile” size=”20″>(파일의 용량 제한 : 20M)</td>
  15.         </tr>
  16.         <tr>
  17.                 <td align=”center” colspan=”2″>
  18.                         <input type=”submit” value=”전송”> <input type=”reset” value=”취소”>
  19.                 </td>
  20.         </tr>
  21. </table>
  22. </form>
  23. </body>
  24. </html>

여기서 유의해야 할 것은 7행과 14행밖에 없습니다.

먼저 7행을 보면,
form 태그의 ENCTYPE 속성에 “multipart/form-data”를 써 줍니다. 이 줄이 바로 폼에 입력된 데이터를 파일 형태로 전송하는 역할을 합니다.
ENCTYPE은 서버에 보낼 데이터의 타입을 규정합니다. 기본값은 “application/x-www-form-urlencoded”입니다. 그러나 파일을 전송해야할 때는 반드시 “multipart/form-data”를 써야합니다.

너무 어렵게 생각하지 마시고, 그냥 파일을 업로드해야할 경우에는
form 태그 안에 ENCTYPE=”multipart/form-data”를 쓰면 되는구나, 그렇게 생각하세요.

그리고 14행.
input 태그의 TYPE 속성에 “file”을 설정하면, 위 [그림1]과 같이 [찾아보기…] 버튼이 포함된 한줄 글 입력 상자가 표시됩니다.

그냥 이렇게만 하면 일단 PC의 파일을 선택할 수 있는 기능이 구현된 것입니다. 쉽죠? 전부 HTML 태그입니다. PHP 프로그램 요소는 하나도 없습니다.

이제는 선택된 파일을 서버로 전송하는 기능이 필요합니다.
다음 시간에 하죠….

이상 동주아빠, 손병목이었습니다.

위로 스크롤