path: root/files/ko/web/html/element/input/file/index.html

---
title: <input type="file">
slug: Web/HTML/Element/Input/file
tags:
  - HTML
  - HTML forms
  - Input Type
  - Reference
  - 파일
translation_of: Web/HTML/Element/input/file
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong><code>file</code></strong> 유형의 {{htmlelement("input")}} 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, <a href="/ko/docs/Learn/HTML/Forms">양식을 제출</a>해 서버로 전송하거나, <a href="/ko/docs/Web/API/File/Using_files_from_web_applications">File API</a>를 사용한 JavaScript 코드로 조작할 수 있습니다.</span></p>

<div>{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}</div>

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("값")}}</strong></td>
   <td>선택한 파일의 경로를 나타내는 {{domxref("DOMString")}}.</td>
  </tr>
  <tr>
   <td><strong>이벤트</strong></td>
   <td>{{domxref("HTMLElement/change_event", "change")}}, {{domxref("HTMLElement/input_event", "input")}}</td>
  </tr>
  <tr>
   <td>
    <p><strong>지원하는 공통 특성</strong></p>
   </td>
   <td>{{htmlattrxref("required", "input")}}</td>
  </tr>
  <tr>
   <td><strong>추가 특성</strong></td>
   <td>{{htmlattrxref("accept", "input/file")}}, {{htmlattrxref("capture", "input/file")}}, {{htmlattrxref("files", "input/file")}}, {{htmlattrxref("multiple", "input/file")}}</td>
  </tr>
  <tr>
   <td><strong>IDL 특성</strong></td>
   <td><code>files</code>, <code>value</code></td>
  </tr>
  <tr>
   <td><strong>DOM 인터페이스</strong></td>
   <td>{{domxref("HTMLInputElement")}}</td>
  </tr>
  <tr>
   <td><strong>메서드</strong></td>
   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="값">값</h2>

<p>파일 입력 칸의 {{htmlattrxref("value", "input")}} 특성은 선택한 파일의 경로를 나타내는 {{domxref("DOMString")}}을 담습니다. 사용자가 여러 개의 파일을 선택한 경우 <code>value</code>는 파일 목록의 첫 번째 파일을 가리키며, 나머지 파일은 요소의 {{domxref("HTMLInputElement.files")}} 속성으로 가져올 수 있습니다.</p>

<div class="note"><strong>참고:</strong>

<ol>
 <li>아직 아무런 파일도 선택하지 않은 경우 빈 문자열(<code>""</code>)을 사용합니다.</li>
 <li>악의적인 소프트웨어가 사용자의 파일 구조를 알아내는 것을 방지하기 위해, 값 문자열은 항상 <a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly">C:\fakepath\를 앞에 포함</a>합니다.</li>
</ol>
</div>

<h2 id="추가_특성">추가 특성</h2>

<p>모든 {{htmlelement("input")}} 요소의 공용 특성 외에도, <code>file</code> 유형은 아래의 특성도 지원합니다.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">특성</th>
   <th scope="col">설명</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("accept")}}</code></td>
   <td>허용하는 파일 유형을 나타내는 하나 이상의 {{anch("고유 파일 유형 지정자")}}</td>
  </tr>
  <tr>
   <td><code>{{anch("capture")}}</code></td>
   <td>이미지 또는 비디오 데이터를 캡처할 때 사용할 방법</td>
  </tr>
  <tr>
   <td><code>{{anch("files")}}</code></td>
   <td>선택한 파일을 나열하는 {{domxref("FileList")}}</td>
  </tr>
  <tr>
   <td><code>{{anch("multiple")}}</code></td>
   <td>지정할 경우 사용자가 여러 개의 파일을 선택할 수 있음</td>
  </tr>
 </tbody>
</table>

<h3 id="htmlattrdefaccept">{{htmlattrdef("accept")}}</h3>

<p><a href="/ko/docs/Web/HTML/Attributes/accept"><code>accept</code></a> 특성은 파일 입력 칸이 허용할 파일 유형을 나타내는 문자열로, 쉼표로 구분한 <strong>{{anch("고유 파일 유형 지정자")}}</strong>의 목록입니다. 주어진 파일 유형의 식별 방법이 여러 가지일 수도 있으므로, 특정 파일 형식이 필요할 땐 유형의 집합을 제공하는 것이 좋습니다.</p>

<p>예를 들어, Microsoft Word 파일을 식별하는 방법은 여러가지이므로, Word 파일을 허용하는 <code>&lt;input&gt;</code>은 다음과 같은 형태를 갖게 됩니다.</p>

<pre class="brush: html notranslate">&lt;input type="file" id="docpicker"
  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"&gt;</pre>

<h3 id="htmlattrdefcapture">{{htmlattrdef("capture")}}</h3>

<p><a href="/ko/docs/Web/HTML/Attributes/accept"><code>accept</code></a> 특성이 이미지나 비디오 캡처 데이터를 요구할 경우, <a href="/ko/docs/Web/HTML/Attributes/capture"><code>capture</code></a> 특성으로는 어떤 카메라를 사용할지 지정할 수 있습니다. <code>user</code> 값은 전면 카메라(사용자를 향한 카메라)와 마이크를, <code>environment</code> 값은 후면 카메라와 마이크를 사용해야 함을 나타냅니다. <code>capture</code> 특성을 누락한 경우 {{Glossary("user agent", "사용자 에이전트")}}가 어떤 쪽을 선택할지 스스로 결정합니다. 요청한 방향의 카메라를 사용할 수 없는 경우 사용자 에이전트는 자신이 선호하는 기본 모드로 대체할 수 있습니다.</p>

<div class="note"><strong>참고:</strong> <code>capture</code>는 과거 불리언 특성이었으며, 존재할 경우 파일 선택 창을 요청하는 대신 장치의 카메라나 마이크 등 미디어 캡처 장치를 요청했었습니다.</div>

<h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3>

<p>선택한 모든 파일을 나열하는 {{domxref("FileList")}} 객체입니다. {{htmlattrxref("multiple", "input/file")}} 특성을 지정하지 않았다면 두 개 이상의 파일을 포함하지 않습니다.</p>

<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3>

<p><a href="/ko/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> 불리언 특성을 지정한 경우 사용자가 파일 선택 창에서 복수의 파일을 선택할 수 있습니다.</p>

<h2 id="비표준_특성">비표준 특성</h2>

<p>위의 표준 특성 외에도, 다음과 같이 일부 브라우저에서만 사용할 수 있는 비표준 특성도 존재합니다. 지원하지 않는 브라우저에서의 코드 동작에 제약이 생길 수 있으므로, 가능하면 사용을 피해야 합니다.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">특성</th>
   <th scope="col">설명</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("webkitdirectory")}}</code></td>
   <td>사용자가 디렉토리를 선택할 수 있는지 나타내는 불리언 특성. <code>{{anch("multiple")}}</code> 특성을 지정한 경우 복수 선택 가능</td>
  </tr>
 </tbody>
</table>

<h3 id="htmlattrdefwebkitdirectory_non-standard_inline">{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</h3>

<p><code>webkitdirectory</code> 불리언 특성이 존재할 경우 사용자의 파일 선택 창에서 디렉토리만 선택 가능해야 함을 나타냅니다. {{domxref("HTMLInputElement.webkitdirectory")}} 문서를 방문해 보다 자세한 정보와 예제를 알아보세요.</p>

<div class="note">
<p><strong>참고:</strong> <code>webkitdirectory</code>는 원래 WebKit 기반 브라우저에서만 구현했었으나, Microsoft Edge와 Firefox(50 이상)도 지원합니다. 그러나, 비록 상대적으로 널리 지원하고는 있으나, 여전히 비표준 특성이므로 대안이 없는 경우에만 사용해야 합니다.</p>
</div>

<h2 id="고유_파일_유형_지정자">고유 파일 유형 지정자</h2>

<p><strong>고유 파일 유형 지정자</strong>는 <code>file</code> 유형의 {{htmlelement("input")}}에서 선택할 수 있는 파일의 종류를 설명하는 문자열입니다. 각각의 유형 지정자는 다음 형태 중 하나를 취할 수 있습니다.</p>

<ul>
 <li>마침표로 시작하는 유효한 파일 이름 확장자. 대소문자를 구분하지 않습니다. 예시: <code>.jpg</code>, <code>.pdf</code>, <code>.doc</code>.</li>
 <li>확장자를 포함하지 않은 유효한 MIME 유형 문자열.</li>
 <li><code>audio/*</code>는 "모든 오디오 파일"을 의미합니다.</li>
 <li><code>video/*</code>는 "모든 비디오 파일"을 의미합니다.</li>
 <li><code>image/*</code>는 "모든 이미지 파일"을 의미합니다.</li>
</ul>

<p><code>accept</code> 특성이 고유 파일 유형 지정자를 값으로 받습니다. 쉼표로 구분하면 여러 개의 지정자도 사용할 수 있습니다. 예를 들어, 표준 이미지 형식 뿐만 아니라 PDF 파일도 받을 수 있어야 하는 입력 칸은 다음 코드처럼 작성할 수 있습니다.</p>

<pre class="brush: html notranslate">&lt;input type="file" accept="image/*,.pdf"&gt;</pre>

<h2 id="파일_입력_칸_사용하기">파일 입력 칸 사용하기</h2>

<h3 id="기본_예제">기본 예제</h3>

<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
 &lt;div&gt;
   &lt;label for="file"&gt;Choose file to upload&lt;/label&gt;
   &lt;input type="file" id="file" name="file" multiple&gt;
 &lt;/div&gt;
 &lt;div&gt;
   &lt;button&gt;Submit&lt;/button&gt;
 &lt;/div&gt;
&lt;/form&gt;</pre>

<div class="hidden">
<pre class="brush: css notranslate">div {
  margin-bottom: 10px;
}</pre>
</div>

<p>결과는 다음과 같습니다.</p>

<p>{{EmbedLiveSample('기본_예제', 650, 60)}}</p>

<div class="note">
<p><strong>참고</strong>: 이 예제는 GitHub에서도 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">소스 코드</a>와 <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">라이브 예제</a>를 확인하세요.</p>
</div>

<p>사용자의 장치와 운영체제에 상관없이, 파일 입력 칸은 사용자가 파일을 선택할 수 있도록 파일 선택 대화창을 여는 하나의 버튼을 제공합니다.</p>

<p>예제 코드와 같이 {{htmlattrxref("multiple", "input/file")}} 특성을 지정한 경우 파일 여러 개를 한 번에 선택할 수 있습니다. 사용자는 플랫폼이 허용하는 방법(<kbd>Shift</kbd>, <kbd>Ctrl</kbd> 누르기 등)을 통해 파일 선택 창에서 두 개 이상의 파일을 선택합니다. <code>&lt;input&gt;</code> 하나에 파일 하나씩만 선택을 허용하고 싶은 경우 <code>multiple</code> 특성을 제거하세요.</p>

<h3 id="선택한_파일의_정보_가져오기">선택한 파일의 정보 가져오기</h3>

<p>요소의 {{domxref("HTMLInputElement.files")}} 속성은 선택한 파일({{domxref("File")}}) 목록을 {{domxref("FileList")}} 객체로 반환합니다. <code>FileList</code>는 배열처럼 행동하므로, <code>length</code> 속성을 사용해 현재 선택한 파일의 수를 알 수 있습니다.</p>

<p>각각의 <code>File</code> 객체는 다음과 같은 정보를 가지고 있습니다.</p>

<dl>
 <dt><code>name</code></dt>
 <dd>파일 이름.</dd>
 <dt><code>lastModified</code></dt>
 <dd>파일을 마지막으로 수정한 시각을 나타내는 숫자. UNIX 표준시(1970년 1월 1일 자정)으로부터 지난 시간을 밀리초 단위로 나타낸 값입니다.</dd>
 <dt><code>lastModifiedDate</code> {{deprecated_inline}}</dt>
 <dd>파일을 마지막으로 수정한 시각을 나타내는 {{jsxref("Date")}} 객체. 더 이상 사용하지 않아야 합니다. <code>lastModified</code>를 대신 사용하세요.</dd>
 <dt><code>size</code></dt>
 <dd>파일의 크기를 바이트 단위로 나타낸 값.</dd>
 <dt><code>type</code></dt>
 <dd>파일의 <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME 유형</a>.</dd>
 <dt><code>webkitRelativePath</code> {{non-standard_inline}}</dt>
 <dd>{{htmlattrxref("webkitdirectory", "input/file")}} 특성을 사용한 경우, 기준 디렉토리에 대한 파일의 상대적인 경로. 비표준 특성이므로 사용에 주의가 필요합니다.</dd>
</dl>

<div class="hidden note">
<p><strong>Note</strong>: You can set as well as get the value of <code>HTMLInputElement.files</code> in all modern browsers; this was most recently added to Firefox, in version 57 (see {{bug(1384030)}}).</p>
</div>

<h3 id="가능한_파일_유형_제한하기">가능한 파일 유형 제한하기</h3>

<p>종종, 사용자가 아무 파일이나 선택하지 못하도록 제한하고, 받을 수 있는 파일의 유형을 정해두고 싶을 때가 있습니다. 예를 들어, 프로필 사진을 받는 입력 칸의 경우, {{glossary("JPEG")}}, {{glossary("PNG")}}처럼 웹 호환 가능한 이미지 형식을 선택하도록 해야 할 것입니다.</p>

<p>허용하는 파일 유형은 {{htmlattrxref("accept","input/file")}} 특성을 사용해 지정할 수 있으며, 허용할 파일 확장자나 MIME 유형을 쉼표로 구분한 값을 제공해야 합니다. 다음은 몇 가지 예시입니다.</p>

<ul>
 <li><code>accept="image/png"</code> or <code>accept=".png"</code> — PNG 파일을 허용합니다.</li>
 <li><code>accept="image/png, image/jpeg"</code> 또는 <code>accept=".png, .jpg, .jpeg"</code> — PNG와 JPEG를 허용합니다.</li>
 <li><code>accept="image/*"</code> — <code>image/*</code> MIME 유형을 가진 모든 파일을 허용합니다. 많은 모바일 기기에서는, 이 값을 지정할 경우 사용자가 카메라로 사진을 찍을 수 있도록 설정합니다.</li>
 <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — MS Word 문서처럼 보이는 파일을 모두 허용합니다.</li>
</ul>

<p>보다 완전한 예제 코드를 보겠습니다.</p>

<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
  &lt;div&gt;
    &lt;label for="profile_pic"&gt;Choose file to upload&lt;/label&gt;
    &lt;input type="file" id="profile_pic" name="profile_pic"
          accept=".jpg, .jpeg, .png"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<div class="hidden">
<pre class="brush: css notranslate">div {
  margin-bottom: 10px;
}</pre>
</div>

<p>위 코드는 이전 예제와 비슷하게 보이는 결과를 냅니다.</p>

<p>{{EmbedLiveSample('가능한_파일_유형_제한하기', 650, 60)}}</p>

<div class="note">
<p><strong>참고</strong>: GitHub에서도 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">소스 코드</a>, <a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">라이브 실행 결과</a>.</p>
</div>

<p>외형은 유사해 보일지라도, 이번 예제에서 파일을 선택하려고 한다면 <code>accept</code>에 지정한 파일 유형만 선택 가능함을 확인할 수 있습니다. (정확한 동작은 브라우저와 운영체제에 따라 다를 수 있습니다)</p>

<p><img alt="Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable." src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p>

<p><code>accept</code> 특성은 선택한 파일 유형을 검증하지는 않으며, 단순히 브라우저가 사용자를 올바른 파일 유형으로 유도하도록 힌트를 제공할 뿐입니다. (대부분의 경우) 사용자가 파일 선택 창의 옵션을 설정해 <code>accept</code>를 덮어쓰고 자신이 원하는 아무 파일이나 선택할 수 있으므로, 파일 입력 칸에 잘못된 유형의 파일이 올 수 있습니다.</p>

<p>그러므로, 반드시 적절한 서버 사이드 유효성 검증을 통해 <code>accept</code> 특성을 보조해야 합니다.</p>

<h3 id="참고">참고</h3>

<ol>
 <li>
  <p>파일 입력 칸의 값을 스크립트에서 설정할 수는 없습니다. 따라서 다음 코드는 아무런 효과도 내지 않습니다.</p>

  <pre class="brush: js notranslate">const input = document.querySelector("input[type=file]");
input.value = "foo";
</pre>
 </li>
 <li>
  <p><code>&lt;input type="file"&gt;</code>로 선택한 원본 파일의 실제 경로는 명확한 보안상 문제로 인해 알 수 없습니다. 대신 앞에 <code>C:\fakepath\</code> 를 붙인 파일 이름을 경로로 보여줍니다. 하필 이런 모습이 된 것에는 역사적인 이유가 있지만 이 동작은 모든 최신 브라우저에서 지원하고 있으며, 사실 <a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">명세에도 포함</a>되어 있습니다.</p>
 </li>
</ol>

<h2 id="예제">예제</h2>

<p>이번 예제에서는 좀 더 발전된 파일 선책 창을 만들어 보겠습니다. <code>HTMLInputElement.files</code> 속성에서 알 수 있는 정보도 활용하면서, 몇 가지 재밌는 활용법도 보여드리겠습니다.</p>

<div class="note">
<p><strong>참고</strong>: 전체 소스 코드는 GitHub에 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">라이브 실행 결과</a>). 주 목적이 JavaScript이므로 CSS는 따로 설명하지 않겠습니다.</p>
</div>

<p>우선 HTML을 살펴보겠습니다.</p>

<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
  &lt;div&gt;
    &lt;label for="image_uploads"&gt;Choose images to upload (PNG, JPG)&lt;/label&gt;
    &lt;input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple&gt;
  &lt;/div&gt;
  &lt;div class="preview"&gt;
    &lt;p&gt;No files currently selected for upload&lt;/p&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<div class="hidden">
<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li, div &gt; p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label, form button {
  background-color: #7F9CCB;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover, form button:hover {
  background-color: #2D5BA3;
  color: white;
}

form label:active, form button:active {
  background-color: #0D3F8F;
  color: white;
}</pre>
</div>

<p>지금까지 봤던 것과 거의 같으므로 설명할 부분은 없겠습니다.</p>

<p>이제 JavaScript 차례입니다.</p>

<p>우선 양식의 파일 입력 칸과, <code>.preview</code> 클래스를 가진 {{htmlelement("div")}} 요소에 대한 참조를 가져옵니다. 그 후, {{htmlelement("input")}} 요소를 숨겨버립니다. 파일 입력 칸은 보통 못생겼고, 스타일을 적용하기도 어려우며 브라우저마다 디자인이 다르기 때문입니다. <code>&lt;input&gt;</code>은 연결된 {{htmlelement("label")}}을 클릭해도 활성화할 수 있으므로, 시각적으로 <code>&lt;input&gt;</code>을 숨긴 후 레이블에 버튼처럼 스타일을 적용해서, 파일을 업로드하고 싶은 경우 레이블을 누르라는 것을 알려주는 편이 낫습니다.</p>

<pre class="brush: js notranslate">var input = document.querySelector('input');
var preview = document.querySelector('.preview');

input.style.opacity = 0;</pre>

<div class="note">
<p><strong>참고:</strong> {{cssxref("visibility", "visibility: hidden")}}, {{cssxref("display", "display: none")}}로 숨길 경우 접근성 보조 기술이 파일 입력 칸을 상호작용 할 수 없는 상태라고 인식하기 때문에 {{cssxref("opacity")}}를 대신 사용합니다.</p>
</div>

<p>그 다음으로는 입력 칸에 <a href="/ko/docs/Web/API/EventTarget/addEventListener">이벤트 수신기</a>를 부착해 그 값이 달라지는지(예제의 경우, 파일을 선택할 때) 지켜봅니다. 이벤트 수신기는 밑에서 만들 <code>updateImageDisplay()</code> 함수를 호출하게 됩니다.</p>

<pre class="brush: js notranslate">input.addEventListener('change', updateImageDisplay);</pre>

<p><code>updateImageDisplay()</code> 함수를 호출하면 다음 작업을 수행하게 됩니다.</p>

<ul>
 <li>{{jsxref("Statements/while", "while")}} 반복문을 사용해 <code>&lt;div&gt;</code>에 존재하는 이전 파일의 미리보기를 제거합니다.</li>
 <li>선택한 모든 파일의 정보를 들고 있는 {{domxref("FileList")}} 객체를 가져온 후 <code>curFiles</code> 변수에 저장합니다.</li>
 <li><code>curFiles.length</code>가 0과 같은지 검사해 아무런 파일도 선택하지 않았는지 검사합니다. 그렇다면, <code>&lt;div&gt;</code>에 아무런 파일도 선택하지 않았다는 메시지를 출력합니다.</li>
 <li>반면, 파일을 선택한 경우라면, 각각의 파일을 순회하며 각각의 정보를 미리보기 <code>&lt;div&gt;</code>에 출력합니다. 참고할 점:</li>
 <li>뒤에서 작성할 <code>validFileType()</code> 함수를 사용해 순회 중인 파일이 올바른 유형, 즉 <code>accept</code> 특성에 속한 파일인지 판별합니다.</li>
 <li>올바른 파일이라면,
  <ul>
   <li><code>&lt;div&gt;</code> 안의 목록에 해당 파일의 이름과 크기를 항목으로 추가합니다. 이름은 <code>file.name</code>과 <code>file.size</code>로 가져옵니다. 또 다른 함수인 <code>returnFileSize()</code>는 파일 크기를 보기 좋게 바이트/KB/MB로 서식해 출력합니다. (브라우저는 바이트 크기로만 알려줍니다)</li>
   <li>{{domxref("URL.createObjectURL", "URL.createObjectURL(curFiles[i])")}}를 호출해 이미지 미리보기 썸네일을 생성하고, 새로 만든 {{htmlelement("img")}} 태그의 {{htmlattrxref("src", "img")}}에 지정한 후, 이미지도 목록의 항목에 추가합니다.</li>
  </ul>
 </li>
 <li>파일 유형이 유효하지 않은 경우 사용자에게 다른 파일을 선택해야 한다고 알려주는 메시지를 표시합니다.</li>
</ul>

<pre class="brush: js notranslate">function updateImageDisplay() {
  while(preview.firstChild) {
    preview.removeChild(preview.firstChild);
  }

  const curFiles = input.files;
  if(curFiles.length === 0) {
    const para = document.createElement('p');
    para.textContent = 'No files currently selected for upload';
    preview.appendChild(para);
  } else {
    const list = document.createElement('ol');
    preview.appendChild(list);

    for(const file of curFiles) {
      const listItem = document.createElement('li');
      const para = document.createElement('p');
      if(validFileType(file)) {
        para.textContent = `File name ${file.name}, file size ${returnFileSize(file.size)}.`;
        const image = document.createElement('img');
        image.src = URL.createObjectURL(file);

        listItem.appendChild(image);
        listItem.appendChild(para);
      } else {
        para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`;
        listItem.appendChild(para);
      }

      list.appendChild(listItem);
    }
  }
}</pre>

<p><code>validFileType()</code> 함수는 매개변수로 {{domxref("File")}} 객체를 받아서, 그 파일의 <code>type</code>이 <code>fileTypes</code>의 아무 값과 동일한지 판별합니다. {{jsxref("Array.prototype.includes()")}}를 사용하여 type과 일치하는 값이 존재하면 <code>true</code>, 아니면 <code>false</code>를 반환합니다.</p>

<pre class="brush: js notranslate">// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
const fileTypes = [
  "image/apng",
  "image/bmp",
  "image/gif",
  "image/jpeg",
  "image/pjpeg",
  "image/png",
  "image/svg+xml",
  "image/tiff",
  "image/webp",
  "image/x-icon"
];

function validFileType(file) {
  return fileTypes.includes(file.type);
}</pre>

<p><code>returnFileSize()</code> 함수는 숫자(현재 파일의 <code>size</code> 속성에서 가져온, 파일의 바이트 크기)를 받은 후, 읽기 좋게 바이트/KB/MB 단위로 서식을 적용합니다.</p>

<pre class="brush: js notranslate">function returnFileSize(number) {
  if(number &lt; 1024) {
    return number + 'bytes';
  } else if(number &gt;= 1024 &amp;&amp; number &lt; 1048576) {
    return (number/1024).toFixed(1) + 'KB';
  } else if(number &gt;= 1048576) {
    return (number/1048576).toFixed(1) + 'MB';
  }
}</pre>

<p>결과는 다음과 같습니다. 한번 직접 파일을 선택해보세요.</p>

<p>{{EmbedLiveSample('예제', '100%', 200)}}</p>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '&lt;input type="file"&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Initial definition</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '&lt;input type="file"&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Initial definition</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}</td>
   <td>{{Spec2('HTML Media Capture')}}</td>
   <td>initial <code>capture</code> attribute</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("html.elements.input.input-file")}}</p>

<h2 id="같이_보_기">같이 보 기</h2>

<ul>
 <li><a href="/ko/docs/Web/API/File/Using_files_from_web_applications">웹 애플리케이션에서 파일 사용하기</a> — <code>&lt;input type="file"&gt;</code>과 File API에 대한 유용한 예제를 더 가지고 있습니다.</li>
 <li><a href="/ko/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS 속성 호환성</a></li>
</ul>