html에서 파일 올리기

html에서 파일을 올려 다른 파일로 전송

<form action="fileupload.php" method="post" enctype="multipart/form-data">
	올릴 파일을 고르시오<br>
   	<input type="file" name="file" id="fileToUpload"><br>
    <button type="submit" class="btn">Upload File</button>
</form>

위 코드는 html에서 파일을 받는 from 부분의 코드이다.

코드 해석

저 코드는 input으로 파일을 선택해 받거나 드래그 드롭으로 파일을 받아 button을 누르면 from action에 있는 php 파일로 전송하는 코드이다.

각 코드의 세부 설명은

1. form

html form 태크에 action,method, enctype 3개의 속성을 사용했는데 이는 각각

• action : 전송 목적지 - url
• method : 전송 방식 - post or get
• enctype : 전송 데이터 형식 - 인코딩 타입

을 의미한다.

여기서 enctype는 3가지 종류가 있다
1. application/x-www-form-urlencoded
기본 값이다.
서버로 전송되기 전에 인코딩 된다.

2. mutipart/form-data
   파일 받을때 설정해주는 값이다.
   이미지나 파일을 서버로 전송할 경우 이 방식을 사용한다고 한다.

3. text/plain
   인코딩을 하지 않은 문자 그대로의 상태를 전송한다.

2. input

html input 태크에 type, name, id 3개의 속성을 사용했는데 이는 각각

• type : 입력형태
• name : 해당 객체
• id : 해당 객체

을 의미한다.

하나씩 살펴보면
1. type

종류	설명
text	한 줄짜리 텍스트 박스
password	비밀번호 입력 필드
search	검색할 때 입력하는 필드
url	url 주소 입력 필드
email	메일 입력 필드
tel	전화번호 입력 필드
checkbox	여러 항목에서 2개 이상 선택 가능한 체크 박스
radio	여러 항목에서 1개만 선택 가능한 라디오 버튼
number	숫자를 조절하는 스핀 박스
range	숫자를 조절하는 슬라이드 막대
date	사용자 지역을 기준으로 날짜(연, 월, 일) 입력
month	사용자 지역을 기준으로 날짜(연, 월) 입력
week	사용자 지역을 기준으로 날짜(연, 주) 입력
time	사용자 지역을 기준으로 시간(시, 분, 초, 분할 초) 입력
datetime	국제 표준시의 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) 입력
datetime-local	사용자 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) 입력
submit	전송 버튼
reset	리셋 버튼
image	submit 대신 사용할 이미지
button	일반 버튼
file	파일 첨부 버튼
hidden	사용자에게 보이진 않지만 서버에 넘겨주는 값이 있는 필드

2. name
   name 속성은 page 영역에서 중복되어 사용이 가능하며, action에 해당하는 페이지에 GET/POST 방식으로 전달할 수 있는 파라미터로 사용한다.

3. id
   id 속성은 page 안에서 중복으로 사용할 수 없으며, 주로 JavaScript에서 다루기 위해 지정한다.

3. button

html button 태크에 type, class 2개의 속성을 사용했는데

button에서의 type은 submit, reset, button 3가지 종류 밖에 없고 설명은 input 타입에서와 같다

class는 id와 name 처럼 단일 객체로 지정하는 것이 아닌 그룹으로 묶은 객체를 지정하는 것이다.
주로 css에서 자주 쓰인다.