From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/api/filelist/index.html | 134 ++++++++++++++++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 files/pt-br/web/api/filelist/index.html (limited to 'files/pt-br/web/api/filelist/index.html') diff --git a/files/pt-br/web/api/filelist/index.html b/files/pt-br/web/api/filelist/index.html new file mode 100644 index 0000000000..3c5e32b6cd --- /dev/null +++ b/files/pt-br/web/api/filelist/index.html @@ -0,0 +1,134 @@ +--- +title: FileList +slug: Web/API/FileList +translation_of: Web/API/FileList +--- +
{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}
+ +

Um objeto desse tipo é retornado pela propriedade files do elemento HTML {{HTMLElement("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

+ + + + + + + + + + + + + + +
AtributoTipoDescrição
lengthintegerValor 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ção

+ + -- cgit v1.2.3-54-g00ecf