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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
---
title: FileReader
slug: Web/API/FileReader
translation_of: Web/API/FileReader
---
<p>{{ APIRef("File API") }}</p>
<h2 id="Sumario">Sumario</h2>
<p> </p>
<p>El objeto FileReader permite que las aplicaciones web lean ficheros (o información en buffer) almacenados en el cliente de forma asíncrona, usando los objetos {{domxref("File")}} o {{domxref("Blob")}} dependiendo de los datos que se pretenden leer.</p>
<p> </p>
<p>El objeto File puede ser obtenido desde un objeto {{domxref("FileList")}} devuelto como resultado de la selección de archivos por parte del usuario en un elemento {{HTMLElement("input")}}, desde el objeto <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer"><code>DataTransfer </code></a><code>producido por una operación de arrastre (<em>drag and drop</em>) o </code>desde la API mozGetAsFile () en un {{domxref("HTMLCanvasElement")}}.</p>
<h2 id="Constructor">Constructor</h2>
<pre class="syntaxbox">FileReader FileReader();</pre>
<p>Mira el artículo <em><a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">Using files from web applications</a></em> para más detalles y ejemplos.</p>
<h2 id="Propiedades">Propiedades</h2>
<dl>
<dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
<dd>Un {{domxref("DOMError")}} que representa el error que ocurrió al momento de leer el archivo.</dd>
<dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
<dd>Devuelve un entero que indica el estado de FileReader. Puede ser uno de los siguientes:
<table class="standard-table">
<tbody>
<tr>
<td><code>EMPTY</code></td>
<td><code>0</code></td>
<td>No ha sido leido ningún dato aún.</td>
</tr>
<tr>
<td><code>LOADING</code></td>
<td><code>1</code></td>
<td>La información está siendo leída.</td>
</tr>
<tr>
<td><code>DONE</code></td>
<td><code>2</code></td>
<td>Se ha completado la solicitud de lectura.</td>
</tr>
</tbody>
</table>
</dd>
<dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
<dd>El contenido del fichero. Esta propieda es válida solo cuando la propiedad FileReader.readyState es 2, es decir, cuando la lectura ha finalizado. El formato de la información depende de los métodos usados al iniciar la operación de lectura.</dd>
</dl>
<h3 id="Controladores_de_eventos">Controladores de eventos</h3>
<dl>
<dt>{{domxref("FileReader.onabort")}}</dt>
<dd>Un controlador para el evento {{event("abort")}}. Este evento se activa cada vez que se interrumpe la operación de lectura.</dd>
<dt>{{domxref("FileReader.onerror")}}</dt>
<dd>Un controlador para el evento {{event("error")}}. Este evento se activa cada vez que la operación de lectura encuentra un error.</dd>
<dt>{{domxref("FileReader.onload")}}</dt>
<dd>Un controlador para el evento {{event("load")}}. Este evento se activa cada vez que la operación de lectura se ha completado satisfactoriamente.</dd>
<dt>{{domxref("FileReader.onloadstart")}}</dt>
<dd>Un controlador para el evento {{event("loadstart")}}. Este evento se activa cada vez que comienza la lectura.</dd>
<dt>{{domxref("FileReader.onloadend")}}</dt>
<dd>Un controlador para el evento {{event("loadend")}}. Este evento se activa cada vez que la operación de lecura se ha completado (ya sea con éxito o fallo).</dd>
<dt>{{domxref("FileReader.onprogress")}}</dt>
<dd>Un controlador para el evento {{event("progress")}}. Este evento se activa mientras se está leyendo el contenido del objeto {{domxref("Blob")}}.</dd>
</dl>
<div class="note">
<p>Nota: Como <code>FileReader</code> hereda de {{domxref("EventTarget")}}, todos esos eventos también pueden ser escuchados usando el método {{domxref("EventTarget.addEventListener()","addEventListener")}}.</p>
</div>
<p> </p>
<h2 id="Methods" name="Methods">Métodos</h2>
<p> </p>
<dl>
<dt>{{domxref("FileReader.abort()")}}</dt>
<dd>Interrumpe la operación de lectura. A su regreso <code>readyState</code> será <code>DONE</code>.</dd>
<dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}</dt>
<dd>Comienza la lectura del contenido del objeto {{ domxref("Blob") }} especificado, una vez terminada, el atributo <code>result </code>contiene un {{domxref("ArrayBuffer")}} representando los datos del fichero.</dd>
<dt>{{domxref("FileReader.readAsBinaryString()")}}</dt>
<dd>Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo <code>result</code> contiene los datos binarios en bruto del archivo como una cadena.</dd>
<dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
<dd>Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo <code>result</code> contiene un <code>data:</code> URL que representa los datos del fichero.</dd>
<dt>{{domxref("FileReader.readAsText()")}}</dt>
<dd>Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo <code>result</code> contiene el contenido del fichero como una cadena de texto.</dd>
</dl>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
<tr>
<td>{{SpecName('File API','#FileReader-interface','FileReader')}}</td>
<td>{{Spec2('File API')}}</td>
<td>Definición inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Soporte en los navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer*</th>
<th>Opera*</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{ CompatGeckoDesktop("1.9.2") }}</td>
<td>7</td>
<td>10</td>
<td>12.02</td>
<td>6.0.2</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>32</td>
<td>3</td>
<td>10</td>
<td>11.5</td>
<td>6.1</td>
</tr>
</tbody>
</table>
</div>
<h3 id="Notas_de_implementación">Notas de implementación</h3>
<ul>
<li>IE9 tiene una <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info" title="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</li>
<li>Opera tiene un <a href="http://www.opera.com/docs/specs/presto28/file/" title="http://my.opera.com/desktopteam/blog/2011/04/05/stability-gmail-socks">soporte parcial</a> in 11.1.</li>
</ul>
<h4 id="Notas_específicas_para_Gecko">Notas específicas para Gecko</h4>
<ul>
<li>Antes de Gecko 2.0 beta 7 (Firefox 4.0 beta 7), todos los parámetros {{ domxref("Blob") }} de a continuación eran parámetros {{ domxref("File") }}; esto ya se ha actualizado para que coincida con la especificación correcta.</li>
<li>Antes de Gecko 13.0 {{ geckoRelease("13.0") }} la propiedad<code> FileReader.error</code> devolvía un objeto {{ domxref("FileError") }}. Esta interface ha sido eliminada y <code>FileReader.error</code> ahora devielve el objeto {{ domxref("DOMError") }} tal y como se define en el último borrador de FileAPI.</li>
</ul>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
<li><a href="/en/Using_files_from_web_applications" title="en/Using files from web applications">Usando archivos desde aplicaciónes web</a></li>
<li>{{ domxref("File") }}</li>
<li>{{ domxref("Blob") }}</li>
</ul>
|
