files/pt-br/web/api/filelist/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

---
title: FileList
slug: Web/API/FileList
translation_of: Web/API/FileList
---
<div>{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}</div>

<p>Um objeto desse tipo é retornado pela propriedade <code>files</code> do elemento HTML {{HTMLElement("input")}}; isso permite acessar a lista de arquivos selecionados com o elemento <code>&lt;input type="file"&gt;</code>. Também é usado para uma lista de arquivos soltos no conteúdo web usando a API drag and drop; consulte o objeto <a href="/en-US/docs/DragDrop/DataTransfer" title="DragDrop/DataTransfer"><code>DataTransfer</code></a> para detalhes de seu uso.</p>

<div class="note">
<p><strong>Nota:</strong> 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.</p>
</div>

<h2 id="Using_the_file_list" name="Using_the_file_list">Utilizando a lista de arquivos</h2>

<p>Todo elemento <code>&lt;input&gt;</code> possui um array <code>files</code> que permite o acesso aos seus arquivos. Por exemplo, se o HTML inclui o seguinte elemento:</p>

<pre>&lt;input id="fileItem" type="file"&gt;
</pre>

<p>O código a seguir acessa o primeiro elemento da lista de arquivos como um objeto <a href="/en-US/docs/DOM/File" title="DOM/File"><code>File</code></a>:</p>

<pre class="brush: js">var file = document.getElementById('fileItem').files[0];
</pre>

<h2 id="Method_overview" name="Method_overview">Visão geral dos métodos</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td><code>File <a href="#item ()">item</a>(index);</code></td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">Propriedades</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Atributo</td>
   <td class="header">Tipo</td>
   <td class="header">Descrição</td>
  </tr>
  <tr>
   <td><code>length</code></td>
   <td><code>integer</code></td>
   <td>Valor somente-leitura que indica o número de arquivos na lista.</td>
  </tr>
 </tbody>
</table>

<h2 id="Methods" name="Methods">Métodos</h2>

<h3 id="item()" name="item()">item()</h3>

<p>Retorna um objeto <a href="/en-US/docs/DOM/File" title="DOM/File"><code>File</code></a> representando o arquivo no índice especificado na lista.</p>

<pre> File item(
   index
 );
</pre>

<h6 id="Parameters" name="Parameters">Parâmetros</h6>

<dl>
 <dt><code>index</code></dt>
 <dd>O índice (baseado em zero) do arquivo a ser recuperado da lista.</dd>
</dl>

<h6 id="Return_value" name="Return_value">Valor de retorno</h6>

<p>O objeto <a href="/en-US/docs/DOM/File" title="DOM/File"><code>File</code></a> representando o arquivo requisitado.</p>

<h2 id="Example" name="Example">Exemplo</h2>

<p>Este exemplo itera por todos os arquivos selecionados pelo usuário em um elemento <code>input</code>:</p>

<pre class="brush:js">// fileInput é um elemento HTML input: &lt;input type="file" id="myfileinput" multiple&gt;
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 &lt; files.length; i++) {

    // obtém o item
    file = files.item(i);
    // ou
    file = files[i];

    alert(file.name);
}
</pre>

<p>A seguir, um exemplo completo.</p>

<pre class="brush:html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;

&lt;head&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;!--multiple é definido para que múltiplos arquivos possam ser selecionados--&gt;

&lt;input id="myfiles" multiple type="file"&gt;

&lt;/body&gt;

&lt;script&gt;
var puxarArquivos = function() {
    var fileInput = document.querySelector("#myfiles");
    var files = fileInput.files;

    for (var i = 0; i &lt; 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;
&lt;/script&gt;

&lt;/html&gt;</pre>

<h2 id="Specification" name="Specification">Especificação</h2>

<ul>
 <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (inglês)</li>
</ul>