HTML <input type=”file”> – 올바른 이해와 사용 방법

`<input type="file">`

<input> 태그의 type="file"은 사용자가 디바이스에서 파일을 선택하고 업로드할 수 있는 입력 필드입니다.

옵션으로,
여러 개의 파일을 선택할 수 있게 하거나, 허용되는 파일 형식을 지정하는 등의 다양한 속성을 제공합니다.

관련 속성 사용하기

<input type="file">의 관련된 속성에 대해 알아보겠습니다.
다음은 모든 <input> 태그에 공통으로 사용되는 여러 가지 속성 외에도, 다음의 속성을 추가로 지원합니다.

input tpe="file"의 관련 속성
속성	설명
`multiple`	여러 개의 파일을 동시에 선택하고 업로드할 수 있도록 허용합니다.
`accept`	허용되는 파일 형식을 지정합니다.

`multiple` 속성

여러 개의 파일을 동시에 선택하고 업로드할 수 있도록 허용합니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

사용자는 '파일 선택' 버튼을 클릭한 후 파일 선택 대화 상자에서 Shift 키나 Ctrl (Windows) / Command (Mac) 키를 누른 채로 파일을 클릭하여 여러 개의 파일을 선택할 수 있습니다.

`accept` 속성

허용되는 파일 형식을 지정합니다.
이 속성은 파일 선택 대화 상자에서 허용되는 파일 형식을 미리 지정하는 것입니다. 즉, 어떤 종류의 파일을 허용할지 명시하는 역할을 합니다.

`accept` 속성에 사용할 수 있는 값

accept 속성에 사용할 수 있는 값
MIME 타입	파일의 종류를 나타내는 MIME 타입을 지정합니다. 확장자를 포함하지 않은 다음의 유효한 MIME 타입입니다. `image/` : 모든 이미지 파일 `video/` : 모든 비디오 파일 `audio/` : 모든 오디오 파일 `application/pdf` : PDF 파일 `text/plain*` : 일반 텍스트 파일
파일 확장자	마침표(`.`)로 시작하는 유효한 파일 이름 확장자입니다. 대소문자를 구분하지 않습니다. `.jpg` `.png` `.pdf` 그 외 유효한 파일 확장자들...
MIME 타입과 파일 확장자의 조합	MIME 타입과 파일 확장자 둘 다 사용하여 더욱 정확하게 파일 형식을 지정할 수 있습니다. (예) `accept="image/*, .pdf"` 값을 쉼표(`,`)로 구분하여 여러 개를 지정할 수 있습니다.

accept 속성의 값은 쉼표(,)로 구분하여 여러 개를 지정할 수 있습니다. 순서는 상관없습니다.

예제

이 밖에도 사용할 수 있는 관련 속성들이 다양하게 있습니다.
HTML <input> 태그의 여러 가지 속성들을 참조하세요!

주의할 점

<input type="file">을 <form> 태그 내에서 사용할 때에는
enctype="multipart/form-data"를 <form> 태그에 지정해야 합니다. <input type="file">이 포함되어 있는 <form>에는 필수 속성입니다.

<form> 태그의 enctype 속성

HTML

<form action="submit_url" method="post" enctype="multipart/form-data">
    <label for="user-file">파일 업로드</label>
    <input type="file" id="user-file" name="user-file">
    <button type="submit">제출하기</button>
</form>

접근성 고려사항

<input type="file">을 사용할 때에는 <label>을 함께 사용해야 합니다.
자세한 사항은 <input> 태그의 접근성 고려사항을 참조하세요.

브라우저 호환성

input type 속성의 file 값에 대한 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<input type="file">`	1	12	1	11

명세서

input type 속성의 file 값에 대한 명세서 사양
명세서 사양
`<input type="file">`	HTML Standard #file-upload-state-(type=file)

참고문헌

MDN - <input type="file">

<input type="file">

관련 속성 사용하기

multiple 속성

accept 속성

accept 속성에 사용할 수 있는 값

예제