[form] HTML - <input type="file"> 태그 - 업로드 할 파일 선택 (= 파일첨부/첨부파일 입력필드 = 인풋파일타입/파일타입인풋/파일인풋 요소)

1. <input type="file"> 예제 - 첨부할 파일 선택
2. <input type="file"> 정의
3. <input type="file"> 구문

<input type="file"> 예제 - 첨부할 파일 선택

[단일파일 업로드]

 

<form action="/action_page.php" enctype="multipart/form-data">

  <label for="singlefile">1개 파일 선택:</label>

  <input type="file" id="singlefile" name="singlefile">

  <input type="submit">

</form>

 

결과보기

---

[복수파일 업로드]

 

<form action="/action_page.php" enctype="multipart/form-data">

  <label for="multifiles">여러 파일 선택:</label>

  <input type="file" id="multifiles" name="multifiles" multiple>

  <input type="submit">

</form>

 

결과보기

<input type="file"> 정의

 

첨부할 파일을 선택 가능한 INPUT 요소.

 

---

 

1.

• <form> 태그에 enctype="multipart/form-data" 속성 추가해야 제대로 파일 전송됨.
• multiple 속성 추가 시, 한번에 여러 파일 선택 가능.
• 단일파일 선택 시 파일명 표시. 
• 복수파일 선택 시 파일개수 표시.
• <label> 태그 사용 시, 웹접근성 향상됨.
• "파일선택" 등 메시지는 브라우저가 사용자 언어 인식해 자동 결정.

 

2.

모든 브라우저 지원.

 

3. MDN <input type="file"> 예제보기

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

 

<input type="file"> 구문

 

• 단일파일: <input type="file">
• 복수파일: <input type="file" multiple>