upload

파일 업로드 폼

이 섹션에서 하는 일

웹에서 파일을 선택하고, submit으로 서버(uploader)로 전송하는 최소 구조를 확인해요.

코드(원문 그대로 + 오른쪽 줄주석 해설)

   <!DOCTYPE html>   
# 문서가 HTML5 문서임을 선언해요.
   <html lang="en"> 
# HTML 문서 시작, lang은 언어 힌트예요.
     <body> 
# body는 화면에 보일 요소가 들어가는 영역이에요.
       <form action = "uploader" method = "post" enctype = "multipart/form-data"> 
# 파일을 서버로 전송하는 폼이에요(action=목적지, method=전송방식, enctype=파일전송형식).
         <input type = "file" name = "file" > 
# 파일 선택 입력창이에요. name='file'은 서버에서 받을 때의 이름이에요.
         <input type = "submit" value="확인"> 
# 제출 버튼이에요. 누르면 파일이 포함된 POST 요청이 전송돼요.
       </form> 
# form 닫기.
     </body> 
# body 닫기.
   </html> 
# html 닫기.

예상 출력

(브라우저 화면)
- 파일 선택 버튼
- 확인(제출) 버튼

출력 해설(왜 이게 나오나요?)

이 코드는 콘솔 출력이 아니라 ‘업로드 화면’을 만드는 코드예요. 파일을 고르고 확인을 누르면 form의 action(uploader)로 POST 요청이 가고, enctype=multipart/form-data 덕분에 파일이 함께 전송돼요.

무엇을 배울까요?

이해하기 쉬운 예시

파일 업로드 폼

핵심 한 줄