Firefox 3.6은 다중 파일 input 태그를 지원합니다. 이 새로운 기능을 이용하면 표준 기술을 사용하여 하나의 input 태그로 여러 파일을 다룰 수 있습니다. 이 기능은 그 동안 한 번에 하나의 파일을 사용해야만 했던 제약이나, 써드 파티 애플리케이션을 사용해야만 했던 문제를 해결해 주므로 커다란 발전이라 할 수 있습니다. 이 기능은 특히 사진 업로드는 같은 곳에 유용할 것입니다.

input 태그

사용자에게 로컬 파일을 선택하게 하려면 웹 페이지에 다음과 같은 태그를 사용합니다. 이렇게 하면 사용자에게 파일을 선택할 수 있는 창을 보여줍니다.

<input type="file"/>

Firefox 3.6에서는 다중 파일을 지원하도록 input 태그가 확장됐습니다.

<input type="file" multiple=""/>

사용자는 여전히 같은 파일 선택 창을 보게 되지만 하나의 이상의 파일을 선택할 수 있습니다.

form 태그

기존의 form 양식을 그대로 사용할 수 있습니다.

<form method="post" action="upload.php" enctype="multipart/form-data">

  <input name='uploads[]' type="file" multiple=""/>
  <input type="submit" value="Send">

</form>

서버사이드 코드가 PHP라면 name 속성의 값 끝에 대괄호([]) 붙이는 것을 잊어서는 안 됩니다. 대괄호는 HTML 명세서에 있는 내용이 아니지만, 요청 결과를 배열처럼 다루기 위해서 필요합니다(PHP 문서 참조)

다음은 파일 목록을 열거하면서 각 파일의 이름을 출력하는 PHP 코드 예제입니다.

foreach ($_FILES['uploads']['name'] as $filename) {

    echo '<li>' . $filename . '</li>';

}

FileAPI 사용

Firefox 3.6은 또한 File API를 지원합니다. 이 API는 파일을 서버로 보내기 전에 클라이언트 사이드에서 부가적인 처리를 할 수 있게 해 줍니다. input DOM 엘리먼트의 files 속성을 통해 사용자가 선택한 파일에 접근할 수 있으며 FileAPI를 사용하여 파일을 다룰 수 있습니다.

예를 들어, 다음은 사용자가 선택한 각각의 파일 이름을 얻는 방법입니다. 앞에 나온 PHP 예제와 다르게 이 작업은 클라이언트 사이드에서 이뤄집니다.

  var input = document.querySelector("input[type='file']");

  // You've selected input.files.length files
  for (var i = 0; i < input.files.length; i++) {

    // input.files[i] is a file object
    var li = document.createElement("li");
    li.innerHTML = input.files[i].name;

    ul.appendChild(li);
  }

데모

이 기능이 동작하는 것을 확인하려면 다중 파일 input 데모를 보세요. Firefox 3.6이 필요합니다.

문서

다중 파일 input 태그의 더 자세한 내용은 MDC 문서를 참고하세요

원저자: Paul Rouget – 원문으로 가기