웹페이지에서 파일을 업로드 하기 위해서는 input 태그가 필요하다.
이때 input 태그의 속성들에 대해 알아보고 이것을 자바스크립트로 다루는 방법에 대해 알아보자.

1. HTML Input 속성

1) 파일 유형 설정 ("accept")

: 아무 파일이나 다 올릴 수 있기 때문에 파일 유형을 설정해 주는 것이 필요하다.

<input type="file" accept="image/jpeg,.txt"/>

• 한개 이상의 종류를 설정하고 싶다면 ,로 구분하여 여러개를 작성한다.
• 확장자 방식: 마침표로 시작하는 확장자를 써준다(.txt)
• MIME 타입: text/plain, image/jpeg, audio/mpeg, image/*

2) 한번에 여러 파일 업로드 ("multiple")

: 한번에 시프트나 컨트롤을 이용하여 여러개의 파일이 클릭된 경우 모든 파일을 한번에 업로드 하기 위해 필요한 속성이다.

<input type="file" multiple/>

• 해당 속성만 넣어두면 자동으로 시프트나 컨트롤의 사용이 가능해진다.

3) 필수 입력 ("required")

: 필수 입력을 성정하는 것으로 파일 업로드가 반드시 되어야 form으로 묶여 있는 Submit시 다음 이벤트가 실행된다.

<form>jsx
  <input type="file" required/>
  <input type="submit">
</form>

• 첨부하지 않는 경우 파일 첨부 메세지가 실행된다.
• form으로 감싸주는 이유에 대해서는 아래를 보자.

---

1. HTML Form 속성

1) enctype 속성

: enctype은 서버와의 "POST"통신시 해당 파일을 인코딩 되는 방법을 말한다.

<form method="post" enctype="multipart/form-data">
    <input type="file">
    <button type="submit">제출하기</button>
</form>

• multipart/form-data : 인코딩하지 않음, 파일이나 이미지를 서버로 전송할 때 주로 사용
• text/plain : 공백 문자(space)는 "+" 기호로 변환하지만, 나머지 문자는 모두 인코딩되지 않음
• application/x-www-form-urlencoded : 기본값으로 모두 인코딩하게 됨