정의 및 사용 방법

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

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

기본 예제

HTML 
<label for="user-file" style="display: block;">파일 선택:</label>
<input type="file" id="user-file" style="margin-top: 1em;">
브라우저에서 실제 표시된 모습

관련 속성 사용하기

<input type="file">의 관련된 속성에 대해 알아보겠습니다.

multiple 속성

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

HTML 
<input type="file" multiple>

사용자는 '파일 선택' 버튼을 클릭한 후 파일 선택 대화 상자에서 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 속성의 값은 쉼표(,)로 구분하여 여러 개를 지정할 수 있습니다. 순서는 상관없습니다.

    예제
    MIME 타입 
    <input type="file" accept="image/*">

<!-- 여러 개의 값 지정 -->
<input type="file" accept="image/*, audio/*">
    파일 확장자 
    <input type="file" accept=".jpg">

<!-- 여러 개의 값 지정 -->
<input type="file" accept=".jpg, .pdf">
    MIME 타입과 파일 확장자의 조합 
    <input type="file" accept="image/*,.pdf">

    disabled 속성

    해당 요소를 비활성시키려면 disabled 속성을 사용하세요. 비활성화된 요소는 입력이나 값을 바꾸려 해도 그 고유기능이 비활성화되어 아무런 작동도 하지 않습니다. 또한 폼 제출 시 값이 전송되지 않습니다.
    이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

    HTML 
    <label for="user-file">파일 선택:</label>
<input type="file" id="user-file" disabled>
    실제 적용된 모습 파일을 선택하려고 해도 아무런 작동을 하지 않습니다.

    하지만, 이 속성은 value 속성을 직접 설정하는 자바스크립트로는 여전히 변경할 수 있습니다.

    required 속성은 폼 제출 시 사용자가 사전에 반드시 값을 입력해야 하는 필수(required) 컨트롤 요소임을 나타냅니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

    HTML 
    <form>
    <p>
       <label for="user-file">파일 선택(*필수):</label>
        <input type="file" id="user-file" required> <!-- 필수 입력 필드로 지정 -->     
    </p>
    <p>
        <button type="submit">제출</button>
    </p>
</form>
    브라우저에서 실제 표시된 모습 아무 파일도 선택하지 않고 '제출'버튼을 클릭해보세요!
    브라우저가 필수 입력에 대한 오류 메시지를 표시하는 것을 확인할 수 있습니다.

    주의할 점

    <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
    Chrome
    데스크탑데스크탑 Edge
    Edge
    데스크탑 Firefox
    Firefox
    Safari
    Safari
    <input type="file"> 1 12 1 11

    명세서

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

    참고문헌

    같이 보기