Esta página foi traduzida do inglês pela comunidade. Saiba mais e junte-se à comunidade MDN Web Docs.
FileList
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
Um objeto desse tipo é retornado pela propriedade files do elemento HTML <input>; isso permite acessar a lista de arquivos selecionados com o elemento <input type="file">. Também é usado para uma lista de arquivos soltos no conteúdo web usando a API drag and drop; consulte o objeto DataTransfer para detalhes de seu uso.
Nota: Antes do Gecko 1.9.2, o elemento input suportava apenas um arquivo selecionado por vez, ou seja, o array FileList conteria apenas um arquivo. A partir do Gecko 1.9.2, se o atributo multiple do elemento for definido, FileList pode conter múltiplos arquivos.
Utilizando a lista de arquivos
Todo elemento <input> possui um array files que permite o acesso aos seus arquivos. Por exemplo, se o HTML inclui o seguinte elemento:
<input id="fileItem" type="file">
O código a seguir acessa o primeiro elemento da lista de arquivos como um objeto File:
var file = document.getElementById("fileItem").files[0];
Visão geral dos métodos
File item(index); |
|---|
Propriedades
| Atributo | Tipo | Descrição |
|---|---|---|
length |
integer |
Valor somente-leitura que indica o número de arquivos na lista. |
Métodos
item()
Retorna um objeto File representando o arquivo no índice especificado na lista.
File item( index );
Parâmetros
index-
O índice (baseado em zero) do arquivo a ser recuperado da lista.
Valor de retorno
O objeto File representando o arquivo requisitado.
Exemplo
Este exemplo itera por todos os arquivos selecionados pelo usuário em um elemento input:
// fileInput é um elemento HTML input: <input type="file" id="myfileinput" multiple>
var fileInput = document.getElementById("myfileinput");
// files é um objeto FileList (similar ao NodeList)
var files = fileInput.files;
var file;
// percorre os arquivos
for (var i = 0; i < files.length; i++) {
// obtém o item
file = files.item(i);
// ou
file = files[i];
alert(file.name);
}
A seguir, um exemplo completo.
<!doctype html>
<html>
<head> </head>
<body>
<!--multiple é definido para que múltiplos arquivos possam ser selecionados-->
<input id="myfiles" multiple type="file" />
</body>
<script>
var puxarArquivos = function () {
var fileInput = document.querySelector("#myfiles");
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
alert(file.name);
}
};
// seta o 'onchange' do elemento input para chamar a função puxarArquivos
document.querySelector("#myfiles").onchange = puxarArquivos;
</script>
</html>
Especificações
| Specification |
|---|
| File API # filelist-section |
| HTML # dom-input-files-dev |
Compatibilidade com navegadores
Enable JavaScript to view this browser compatibility table.