FileReader

  • Raccourci de la révision : DOM/FileReader
  • Titre de la révision : FileReader
  • ID de la révision : 76459
  • Créé :
  • Créateur : mekal
  • Version actuelle ? Non
  • Commentaire no changes

Contenu de la révision

L'objet FileReader permet aux applications Web de lire le contenu des fichiers (ou des tampons de données brutes) stockés sur l'ordinateur de l'utilisateur de manière asynchrone, en utilisant des objets file ou Blob pour spécifier le fichier ou les données à lire. Les fichiers objet peuvent être obtenue de deux manières et ce a partir d'un objet FileList qui est le resultat retournée par  la selection d'un ou plusieurs fichiers en utilisant l'élément <input> de type file, ou à partir d'un objet glisser-déposer par l'ntermediaire de DataTransfer.

Pour créer un FileReader, il suffit de faire comme ceci:

var reader = new FileReader();

Voir Utilisation de fichiers issus d'applications web pour les détails et exemples.

Note importante sur les paramètres d'entrée

Notez que dans Gecko 1.9.2  (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0) et anterieur a Firefox 4, cette interface utilise un objet file pour spécifier les fichiers; la spécification utilise des objets Blob. À partir de Gecko 2.0 (beta 7) (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), l'implementation correspond aux spécification. Cela peut entraîner quelques changements nécessaires pour votre code, surtout si vous avez utilisé le système non-standard de la méthodes spécifiques a Mozilla sur l'objet File qui a été depuis dépréciées.

apperçu de la methode

Gecko 1.9.2 note

(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

a prtir de Gecko 2.0 beta 7 (Firefox 4.0 bêta 7) tout a été mis à jour pour correspondre à la spécification correctement.

void abort();
void readAsArrayBuffer(in Blob blob); {{ gecko_minversion_inline("7.0") }}
void readAsBinaryString(in Blob blob);
void readAsDataURL(in Blob file);
void readAsText(in Blob blob, [optional] in DOMString encoding);

 Constantes d'etat

Constant Value Description
EMPTY 0 Aucune donnée n'a encore été chargé.
LOADING 1 Les données sont en cours de chargement.
DONE 2 La demande de lecture a été entierement achevée.

Propriété

Proprieté Type Description
error {{ domxref("FileError") }} une erreur  s'est produite durant la lecture du fichier. lecture seule.
readyState unsigned short Indique l'état du FileReader. Ce sera l'une des constantes de l'État.. lecture seule.
result {{ jsapixref("jsval") }} il s'agit du contenu du fichier. Cette propriété est seulement valable après que l'opération de lecture soit terminée, et le format des données dépend de la méthodes utilisé pour lancer l'opération de lecture. lecture seule.

Methodes

abort()

Abandonne de l'opération de lecture. l'etat de readyState sera DONE.

void abort();
Parametres

None.

Les exceptions levées
DOM_FILE_ABORT_ERR
abort() a été appelé alors qu'aucun opération de lecture est en cours (qui est, l'Etat n'a pas de chargement).)

readAsArrayBuffer()

Démarre la lecture du contenu de la specificite, Blob qui peut être file. Lorsque l'opération de lecture est terminée, l'etat de readyState deviendra DONE, et onloadend sera le cas échéant appelée. A ce moment, l'attribut result contient un ArrayBuffer représentant les données du fichier courant.

void readAsArrayBuffer(
  in Blob blob
);
Parametres
blob
le DOM Blob ou File à lire dans  ArrayBuffer.

readAsBinaryString()

Démarre la lecture du contenu de la specificite, Blob qui peut être file. Lorsque l'opération de lecture est terminée, l'etat de readyState deviendra DONE, et onloadend sera le cas échéant appelée. A ce moment, l'attribut result contient les données binaires brutes du fichier courant.

void readAsBinaryString(
  in Blob blob
);
Parametres
blob
le DOM Blob ou File lire à partir duquel.

readAsDataURL()

Démarre la lecture du contenu de la specificite, Blob qui peut être file. Lorsque l'opération de lecture est terminée, l'etat de readyState deviendra DONE, et onloadend sera le cas échéant appelée. A ce moment, l'attribut result contient un ensemble de données: URL représentant les données du fichiercourant en base64.

 

void readAsDataURL(
  in Blob file
);

Cette méthode est utile, par exemple, pour obtenir un aperçu d'une image avant l'upload:

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<style type="text/css">

.box{
position:absolute;
	background-color:gray;
height:200px;width:250px;
	margin-top:120px;
	margin-left:500px;
border:1px ridge #aaa;
	-moz-box-shadow: 10px 10px 10px #212121;
	-webkit-box-shadow: 10px 10px 10px #212121;
	box-shadow: 10px 10px 10px #616161;
}

img{
width:6em;
}

</style>

<script type="text/javascript">

var compteur=0

function dragenter(e) {
	e.stopPropagation();
	e.preventDefault();
}

function drop(e) {

	if (!e) {
		var fichier = document.getElementById('fileinput').files;
	}
	else {
		var fichier = e.dataTransfer.files;
	}
	chacharge(fichier)
}


function chacharge(fichier){
	
	if (fichier[compteur].type.match('image.*')){
	
		var construction=document.createElement('img')
		var elmage= document.body.appendChild(construction);
		
		var charge=new FileReader();
		
		charge.readAsDataURL(fichier[compteur]);
		
		charge.onloadend = function(e){
			
			elmage.src = e.target.result;
			
			if (compteur<fichier.length-1) {
				compteur++;
				chacharge(fichier);
			}
			else{
				compteur=0;
			}
		}
	}

	else{
		if (compteur<fichier.length-1) {
			compteur++;
			chacharge(fichier);
		}
	}
}
</script>
</head>
<body>
<div class='box' ondragenter="this.textContent = ''; dragenter(event)" ondragover="dragenter(event)" ondrop="dragenter(event); drop(event);">deplacez les elements a cette endroit.</div>
<br>
<input type='file' id='fileinput' multiple='multiple' onchange='drop()'>
</body>
</html>
Parameters
file
le DOM Blob ou File lire à partir duquel.

readAsText()

Démarre la lecture du contenu de la specificite, Blob qui peut être file. Lorsque l'opération de lecture est terminée, l'etat de readyState deviendra DONE, et onloadend sera le cas échéant appelée. A ce moment, l'attribut result contient l' ensemble des données du fichier courant en tant que chaîne de carractere.

void readAsText(
  in Blob blob,
  in DOMString encoding {{ optional_inline() }}
);
Parametres
blob
The DOM {{ domxref("Blob") }} or {{ domxref("File") }} from which to read.
encodage
Une chaîne indiquant le codage à utiliser pour les données renvoyées. Par défaut, UTF-8 si le paramètre n'est pas spécifié.

Evenements

onabort
Appelé lorsque l'opération de lecture est interrompue.
onerror
Appelé quand une erreur survient.
onload
Appelé lorsque l'opération de lecture c'est terminée avec succès.
onloadend
Appelé lorsque la lecture est terminée, qu'elle soit réussie ou non. est appellé après onload ou onerror.
onloadstart
Appelé lors de la lecture des données est sur ​​le point de commencer.
onprogress
Appelé régulièrement durant la lecture des données.

compatibilité entre navigateurs

table de compatibilité

Feature Firefox (Gecko) Chrome Internet Explorer* Opera* Safari
Basic support 3.6 (1.9.2) 7 10 11.10 sans drag&drop  

*IE9 voir File API Lab. Opera has support partiel in 11.10.

autres liens

Source de la révision

<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">L'objet</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">FileReader</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">permet aux applications</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Web </span>de <span class="hps" title="Cliquer ici pour voir d'autres traductions">lire le contenu des</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">fichiers (ou</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">des tampons de données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">brutes</span><span title="Cliquer ici pour voir d'autres traductions">)</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">stockés sur l'ordinateur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de l'utilisateur </span></span><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">de manière asynchrone</span></span><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">en utilisant des objets</span> <a href="/en/DOM/File" title="https://developer.mozilla.org/en/DOM/File"><span class="hps" title="Cliquer ici pour voir d'autres traductions">file</span></a> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou <a href="/en/DOM/Blob" title="https://developer.mozilla.org/en/DOM/Blob">Blob</a></span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour spécifier le fichier</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou les données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à lire.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Les fichier</span>s objet <span class="hps" title="Cliquer ici pour voir d'autres traductions">peuvent être obtenue</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de deux </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">manières et ce</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">a partir d'un objet</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">FileList</span> qui est le resultat <span class="hps" title="Cliquer ici pour voir d'autres traductions">retournée par </span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> la selection d'un ou plusieurs </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">fichiers en utilisant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'élément <a href="/fr/HTML/Element/Input" title="https://developer.mozilla.org/fr/HTML/Element/input">&lt;input&gt;</a> de type file</span><span title="Cliquer ici pour voir d'autres traductions">, ou</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à partir d'un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">objet</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">glisser</span><span title="Cliquer ici pour voir d'autres traductions">-déposer</span> par l'ntermediaire de <span class="hps" title="Cliquer ici pour voir d'autres traductions">DataTransfer</span><span title="Cliquer ici pour voir d'autres traductions">.</span><br>
<br>
<span class="hps" title="Cliquer ici pour voir d'autres traductions">Pour créer un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">FileReader</span><span title="Cliquer ici pour voir d'autres traductions">, il suffit de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">faire comme ceci</span><span title="Cliquer ici pour voir d'autres traductions">:</span></span></p>
<pre>var reader = new FileReader();
</pre>
<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Voir <a href="/en/Using_files_from_web_applications" title="https://developer.mozilla.org/en/Using_files_from_web_applications">Utilisation de</a></span><a href="/en/Using_files_from_web_applications" title="https://developer.mozilla.org/en/Using_files_from_web_applications"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">fichiers issus d'applications</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">web</span></a> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour les détails et</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">exemples</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
<h2><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Note importante sur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les paramètres d'entrée</span></span></h2>
<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Notez que dans</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Gecko 1.9.2</span> </span> (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)<span id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">et anterieur a</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Firefox</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">4, cette</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">interface utilise</span> un objet file <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour spécifier les fichiers</span><span title="Cliquer ici pour voir d'autres traductions">;</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la spécification</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">utilise des objets</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Blob</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">À partir de</span> </span>Gecko 2.0 (beta 7) (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)<span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'</span></span>implementation<span id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">correspond aux spécification</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Cela peut entraîner</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">quelques changements</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">nécessaires pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">votre code</span><span title="Cliquer ici pour voir d'autres traductions">, surtout si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">vous avez utilisé le</span> système <span class="hps" title="Cliquer ici pour voir d'autres traductions">non-standard</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de la </span></span><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">méthodes spécifiques a </span></span><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Mozilla</span> </span><span id="result_box" lang="fr"><span class="hps atn" title="Cliquer ici pour voir d'autres traductions">sur l'</span><span title="Cliquer ici pour voir d'autres traductions">objet File</span></span><span id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qui a</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">été depuis dépréciées</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
<h2 name="Method_overview">apperçu de la methode</h2>
<div class="geckoVersionNote">
<p>Gecko 1.9.2 note</p>
<div style="font-size:9px; position:relative; top:-5px; font-style:italic;">(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)</div>
<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">a prtir de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Gecko</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">2.0 beta</span> <span class="hps atn" title="Cliquer ici pour voir d'autres traductions">7 </span><span title="Cliquer ici pour voir d'autres traductions">(Firefox</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">4.0 bêta</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">7) </span><span title="Cliquer ici pour voir d'autres traductions">tout a</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> été</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">mis à jour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour correspondre à</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la spécification</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">correctement.</span></span></p>
</div>
<table class="standard-table"> <tbody> <tr> <td><code>void <a href="#abort()">abort</a>();</code></td> </tr> <tr> <td><code>void <a href="#readAsArrayBuffer()">readAsArrayBuffer</a>(in Blob blob);</code> {{ gecko_minversion_inline("7.0") }}</td> </tr> <tr> <td><code>void <a href="#readAsBinaryString()">readAsBinaryString</a>(in Blob blob);</code></td> </tr> <tr> <td><code>void <a href="#readAsDataURL()">readAsDataURL</a>(in Blob file);</code></td> </tr> <tr> <td><code>void <a href="#readAsText()">readAsText</a>(in Blob blob, [optional] in DOMString encoding);</code></td> </tr> </tbody>
</table>
<h2 name="State_constants"> Constantes d'etat</h2>
<table class="standard-table"> <tbody> <tr> <td class="header">Constant</td> <td class="header">Value</td> <td class="header">Description</td> </tr> <tr> <td><code>EMPTY</code></td> <td><code>0</code></td> <td><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Aucune donnée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'a</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">encore été chargé</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></td> </tr> <tr> <td><code>LOADING</code></td> <td><code>1</code></td> <td><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Les données sont</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">en cours de chargement</span></span>.</td> </tr> <tr> <td><code>DONE</code></td> <td><code>2</code></td> <td><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">La demande</span> de <span class="hps" title="Cliquer ici pour voir d'autres traductions">lecture a été</span> entierement <span class="hps" title="Cliquer ici pour voir d'autres traductions">achevée</span></span>.</td> </tr> </tbody>
</table>
<h2 name="Properties">Propriété</h2>
<table class="standard-table"> <tbody> <tr> <td class="header">Proprieté</td> <td class="header">Type</td> <td class="header">Description</td> </tr> <tr> <td><code>error</code></td> <td>{{ domxref("FileError") }}</td> <td><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">une erreur </span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">s'est produite durant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la lecture du fichier</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <strong><span class="hps" title="Cliquer ici pour voir d'autres traductions">lecture seule</span></strong></span><strong>.</strong></td> </tr> <tr> <td><code>readyState</code></td> <td><code><a href="/en/unsigned_short" title="en/unsigned short">unsigned short</a></code></td> <td><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Indique</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'état du</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">FileReader</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Ce sera</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'une des constantes</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de l'État.</span></span>. <span id="result_box" lang="fr"> <strong><span class="hps" title="Cliquer ici pour voir d'autres traductions">lecture seule</span></strong></span><strong>.</strong></td> </tr> <tr> <td><code>result</code></td> <td>{{ jsapixref("jsval") }}</td> <td><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">il s'agit du contenu du fichier</span><span class="hps" title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette propriété est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">seulement valable après</span> que <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'opération de lecture</span> soit<span class="hps" title="Cliquer ici pour voir d'autres traductions"> terminée,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">et le</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">format des données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">dépend de</span> la<span class="hps" title="Cliquer ici pour voir d'autres traductions"> méthodes</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">utilisé pour lancer</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'opération de lecture</span></span>. <span id="result_box" lang="fr"> <strong><span class="hps" title="Cliquer ici pour voir d'autres traductions">lecture seule</span></strong></span><strong>.</strong></td> </tr> </tbody>
</table>
<h2 name="Methods">Methodes</h2>
<h3 name="abort()">abort()</h3>
<p><span id="result_box" lang="fr"><span class="hps atn" title="Cliquer ici pour voir d'autres traductions">Abandonne de l'</span><span title="Cliquer ici pour voir d'autres traductions">opération de lecture.</span> l'etat de <span class="hps" title="Cliquer ici pour voir d'autres traductions">readyState</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sera DONE.</span></span></p>
<pre class="eval">void abort();
</pre>
<h6 name="Parameters">Parametres</h6>
<p>None.</p>
<h6 name="Exceptions_thrown"><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Les exceptions levées</span></span></h6>
<dl> <dt><code>DOM_FILE_ABORT_ERR</code></dt> <dd><code>abort()</code> <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">a été appelé</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">alors qu'aucun</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">opération de lecture</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est en cours</span> <span class="hps atn" title="Cliquer ici pour voir d'autres traductions">(</span><span title="Cliquer ici pour voir d'autres traductions">qui est</span><span title="Cliquer ici pour voir d'autres traductions">, l'Etat</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'a pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de chargement).</span></span>)</dd>
</dl>

<h3>readAsArrayBuffer()</h3>
<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Démarre</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la lecture du</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">contenu de</span> <span class="hps atn" title="Cliquer ici pour voir d'autres traductions">la specificite</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Blob</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qui peut être file</span><span class="hps" title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Lorsque</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'opération de lecture</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est terminée, l'etat de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">readyState</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">deviendra</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">DONE</span><span title="Cliquer ici pour voir d'autres traductions">, et</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">onloadend </span><span title="Cliquer ici pour voir d'autres traductions">sera le cas échéant</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> appelée</span></span><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">A ce moment</span><span title="Cliquer ici pour voir d'autres traductions">, </span></span>l'attribut <strong>result</strong><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions"> contient</span></span> un <code><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="/en/JavaScript_typed_arrays/ArrayBuffer">ArrayBuffer</a></code> <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">représentant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données du fichier</span><span title="Cliquer ici pour voir d'autres traductions"> courant.</span></span></p>
<pre class="eval">void readAsArrayBuffer(
  in Blob blob
);
</pre>
<h6 name="Parameters">Parametres</h6>
<dl> <dt><code>blob</code></dt> <dd>le DOM <code><a href="../../../../en/DOM/Blob" rel="custom nofollow">Blob</a></code> ou <code><a href="../../../../en/DOM/File" rel="custom nofollow">File</a></code><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions"> à lire</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">dans </span></span> <code><a href="../../../../en/JavaScript_typed_arrays/ArrayBuffer" rel="internal">ArrayBuffer</a></code>.</dd>
</dl>

<h3 name="readAsBinaryString()">readAsBinaryString()</h3>
<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Démarre</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la lecture du</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">contenu de</span> <span class="hps atn" title="Cliquer ici pour voir d'autres traductions">la specificite</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Blob</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qui peut être file</span><span class="hps" title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Lorsque</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'opération de lecture</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est terminée, l'etat de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">readyState</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">deviendra</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">DONE</span><span title="Cliquer ici pour voir d'autres traductions">, et</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">onloadend </span><span title="Cliquer ici pour voir d'autres traductions">sera le cas échéant</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> appelée.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">A ce moment</span><span title="Cliquer ici pour voir d'autres traductions">, </span></span>l'attribut <strong>result</strong><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions"> contient</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données binaires brutes</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">du fichier courant</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
<pre class="eval">void readAsBinaryString(
  in Blob blob
);
</pre>
<h6 name="Parameters">Parametres</h6>
<dl> <dt><code>blob</code></dt> <dd>le DOM <code><a href="../../../../en/DOM/Blob" rel="custom nofollow">Blob</a></code> ou <code><a href="../../../../en/DOM/File" rel="custom nofollow">File</a></code><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions"> lire à partir duquel</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></dd>
</dl>

<h3 name="readAsDataURL()">readAsDataURL()</h3>
<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Démarre</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la lecture du</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">contenu de</span> <span class="hps atn" title="Cliquer ici pour voir d'autres traductions">la specificite</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Blob</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qui peut être file</span><span class="hps" title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Lorsque</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'opération de lecture</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est terminée, l'etat de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">readyState</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">deviendra</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">DONE</span><span title="Cliquer ici pour voir d'autres traductions">, et</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">onloadend </span><span title="Cliquer ici pour voir d'autres traductions">sera le cas échéant</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> appelée.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">A ce moment</span><span title="Cliquer ici pour voir d'autres traductions">, </span></span>l'attribut <strong>result</strong><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions"> contient</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un ensemble de données</span><span title="Cliquer ici pour voir d'autres traductions">:</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">URL représentant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données du fichier</span></span><span class="short_text" id="result_box" lang="fr"><span title="Cliquer ici pour voir d'autres traductions">courant </span></span><span id="result_box" lang="fr"><span title="Cliquer ici pour voir d'autres traductions">en base64.</span></span></p>
<p> </p>
<pre class="eval">void readAsDataURL(
  in Blob file
);
</pre>
<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette méthode est utile</span><span title="Cliquer ici pour voir d'autres traductions">, par exemple,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour obtenir un aperçu</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">d'une image avant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'upload</span><span title="Cliquer ici pour voir d'autres traductions">:</span></span></p>
<pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /&gt;
&lt;title&gt;Image preview example&lt;/title&gt;
&lt;style type="text/css"&gt;

.box{
position:absolute;
	background-color:gray;
height:200px;width:250px;
	margin-top:120px;
	margin-left:500px;
border:1px ridge #aaa;
	-moz-box-shadow: 10px 10px 10px #212121;
	-webkit-box-shadow: 10px 10px 10px #212121;
	box-shadow: 10px 10px 10px #616161;
}

img{
width:6em;
}

&lt;/style&gt;

&lt;script type="text/javascript"&gt;

var compteur=0

function dragenter(e) {
	e.stopPropagation();
	e.preventDefault();
}

function drop(e) {

	if (!e) {
		var fichier = document.getElementById('fileinput').files;
	}
	else {
		var fichier = e.dataTransfer.files;
	}
	chacharge(fichier)
}


function chacharge(fichier){
	
	if (fichier[compteur].type.match('image.*')){
	
		var construction=document.createElement('img')
		var elmage= document.body.appendChild(construction);
		
		var charge=new FileReader();
		
		charge.readAsDataURL(fichier[compteur]);
		
		charge.onloadend = function(e){
			
			elmage.src = e.target.result;
			
			if (compteur&lt;fichier.length-1) {
				compteur++;
				chacharge(fichier);
			}
			else{
				compteur=0;
			}
		}
	}

	else{
		if (compteur&lt;fichier.length-1) {
			compteur++;
			chacharge(fichier);
		}
	}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class='box' ondragenter="this.textContent = ''; dragenter(event)" ondragover="dragenter(event)" ondrop="dragenter(event); drop(event);"&gt;deplacez les elements a cette endroit.&lt;/div&gt;
&lt;br&gt;
&lt;input type='file' id='fileinput' multiple='multiple' onchange='drop()'&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>file</code></dt> <dd>le DOM <code><a href="../../../../en/DOM/Blob" rel="custom nofollow">Blob</a></code> ou <code><a href="../../../../en/DOM/File" rel="custom nofollow">File</a></code><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions"> lire à partir duquel</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></dd>
</dl>

<h3 name="readAsText()">readAsText()</h3>
<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Démarre</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la lecture du</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">contenu de</span> <span class="hps atn" title="Cliquer ici pour voir d'autres traductions">la specificite</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Blob</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qui peut être file</span><span class="hps" title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Lorsque</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'opération de lecture</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est terminée, l'etat de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">readyState</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">deviendra</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">DONE</span><span title="Cliquer ici pour voir d'autres traductions">, et</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">onloadend </span><span title="Cliquer ici pour voir d'autres traductions">sera le cas échéant</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> appelée.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">A ce moment</span><span title="Cliquer ici pour voir d'autres traductions">, </span></span>l'attribut <strong>result</strong> contient l' <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">ensemble des données</span></span><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions"> du </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">fichier </span></span><span class="short_text" id="result_box" lang="fr"><span title="Cliquer ici pour voir d'autres traductions">courant </span></span><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">en tant que </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">chaîne de carractere</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
<pre class="eval">void readAsText(
  in Blob blob,
  in DOMString encoding {{ optional_inline() }}
);
</pre>
<h6 name="Parameters">Parametres</h6>
<dl> <dt><code>blob</code></dt> <dd>The DOM {{ domxref("Blob") }} or {{ domxref("File") }} from which to read.</dd> <dt><code>encodage</code></dt> <dd><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">chaîne indiquant le</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">codage à utiliser pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données renvoyées.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Par défaut,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">UTF-8</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le paramètre n'est pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifié.</span></span></dd>
</dl>
<h2>Evenements</h2>
<dl> <dt><code>onabort</code></dt> <dd><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Appelé lorsque</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'opération de lecture</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est interrompue.</span></span></dd> <dt><code>onerror</code></dt> <dd><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Appelé quand</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une erreur survient</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></dd> <dt><code>onload</code></dt> <dd><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Appelé lorsque</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'opération de lecture</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">c'est terminée avec succès</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></dd> <dt><code>onloadend</code></dt> <dd><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Appelé lorsque</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la lecture est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">terminée,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qu'elle soit réussie</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou non.</span> est<span class="hps" title="Cliquer ici pour voir d'autres traductions"> appellé</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">après</span></span> <code>onload</code> ou <code>onerror</code>.</dd> <dt><code>onloadstart</code></dt> <dd><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Appelé</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">lors de la lecture</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">des données est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sur ​​le point de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">commencer.</span></span></dd> <dt><code>onprogress</code></dt> <dd><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Appelé</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">régulièrement</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">durant la lecture des</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">données</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></dd>
</dl>
<h2>compatibilité entre navigateurs</h2>
<p>table de compatibilité</p>
<div id="compat-desktop">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Firefox (Gecko)</th> <th>Chrome</th> <th>Internet Explorer*</th> <th>Opera*</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>3.6 (1.9.2)</td> <td>7</td> <td>10</td> <td>11.10 sans drag&amp;drop</td> <td> </td> </tr> </tbody>
</table>
</div>
<p>*IE9 voir <a class=" external" href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info" title="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>. Opera has <a class=" external" href="http://my.opera.com/desktopteam/blog/2011/04/05/stability-gmail-socks" title="http://my.opera.com/desktopteam/blog/2011/04/05/stability-gmail-socks">support partiel</a> in 11.10.</p>
<h2 name="See_also">autres liens</h2>
<ul> <li><a href="../../../../en/Using_files_from_web_applications" rel="internal">Using files from web applications</a></li> <li><code><a href="/fr/DOM/FileReader/File" rel="custom nofollow" title="https://developer.mozilla.org/fr/DOM/FileReader/File">File</a></code></li> <li><a href="http://www.w3.org/TR/FileAPI/#FileReader-interface" rel="custom nofollow">Specification: File API: FileReader</a><span style="background-color:#ff0; font-size: x-small; margin-left:6px; white-space: nowrap; padding: 2px;" title="Working Draft">WD</span></li>
</ul>
Revenir à cette révision