FileList

이 타입의 객체는 HTML <input> 엘리먼트의 files 속성으로부터 반환됩니다; 이는 <input type="file"> 엘리먼트로 선택된 파일의 리스트에 접근하도록 합니다. 또한 드래그 앤 드랍 API를 사용할 때 웹 컨텐트에 드랍된 파일의 리스트에도 사용됩니다; 이 사용에 대한 자세한 내용은 DataTransfer 객체를 보십시오.

Note: Gecko 1.9.2 이전에는, input 엘리먼트는 한번에 하나의 선택된 파일만 지원되었습니다, 이는 FileList가 하나의 파일만을 포함했음을 의미합니다. Gecko 1.9.2를 시작으로, input 엘리먼트의 multiple 속성이 true이면, FileList는 복수의 파일을 포함할 수 있습니다.

파일 리스트 사용

모든 <input> 엘리먼트 노드는 이 리스트의 항목에 접근하도록 허용하는 files 배열을 가지고 있습니다. 예를 들어, HTML이 다음의 파일 입력을 포함한다면:

<input id="fileItem" type="file">

다음 코드 행은 노드의 파일 목록에있는 첫 번째 파일을 File 객체로 가져옵니다.

var file = document.getElementById('fileItem').files[0];

Method overview

File item(index);

Properties

Attribute	Type	Description
`length`	`integer`	목록에있는 파일의 수를 나타내는 읽기 전용 값.

Methods

item()

파일리스트의 지정된 인덱스에있는 파일을 나타내는 File 객체를 리턴합니다.

 File item(
   index
 );

Parameters

index: 리스트로부터 받은 파일의 인덱스로, 0부터 시작합니다.

Return value

요청된 파일을 나타내는 File 입니다.

예시

이 예시는 input 엘리먼트를 사용하여 사용자에 의해 선택된 모든 파일을 순회합니다:

// fileInput is an HTML input element: <input type="file" id="myfileinput" multiple>
var fileInput = document.getElementById("myfileinput");

// files is a FileList object (similar to NodeList)
var files = fileInput.files;
var file;

// loop through files
for (var i = 0; i < files.length; i++) {

    // get item
    file = files.item(i);
    //or
    file = files[i];

    alert(file.name);
}

완전한 코드는 다음과 같습니다.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!--multiple is set to allow multiple files to be selected-->

<input id="myfiles" multiple type="file">

</body>

<script>

var pullfiles=function(){ 
    // love the query selector
    var fileInput = document.querySelector("#myfiles");
    var files = fileInput.files;
    // cache files.length 
    var fl = files.length;
    var i = 0;

    while ( i < fl) {
        // localize file var in the loop
        var file = files[i];
        alert(file.name);
        i++;
    }    
}

// set the input element onchange to call pullfiles
document.querySelector("#myfiles").onchange=pullfiles;

//a.t
</script>

</html>

명세

File upload state (HTML5 working draft)