initial commit

4 files changed, 688 insertions, 0 deletions

diff --git a/files/fr/web/api/file/filename/index.html b/files/fr/web/api/file/filename/index.html
new file mode 100644
index 0000000000..50942c002b
--- /dev/null
+++ b/files/fr/web/api/file/filename/index.html
@@ -0,0 +1,38 @@
+---
+title: File.fileName
+slug: Web/API/File/fileName
+tags:
+  - API
+  - DOM
+  - Fichier
+  - Nom
+  - Propriétés
+translation_of: Web/API/File/fileName
+---
+<p>{{APIRef("File API")}}{{non-standard_header}}</p>
+
+<p>{{obsolete_header(7.0)}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Renvoie le nom du fichier. Pour des raisons de sécurité, le chemin est exclu de la propriété.</p>
+
+<div class="note">Cette propriété est dépréciée. Utilisez {{domxref("File.name")}} à la place.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var name = instanceOfFile.fileName</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Une chaîne de caractères.</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("File.name")}}</li>
+</ul>
diff --git a/files/fr/web/api/file/filesize/index.html b/files/fr/web/api/file/filesize/index.html
new file mode 100644
index 0000000000..b7d03c1e7d
--- /dev/null
+++ b/files/fr/web/api/file/filesize/index.html
@@ -0,0 +1,37 @@
+---
+title: File.fileSize
+slug: Web/API/File/fileSize
+tags:
+  - API
+  - DOM
+  - Fichier
+  - Propriétés
+translation_of: Web/API/File/fileSize
+---
+<p>{{APIRef("File API") }}{{non-standard_header}}</p>
+
+<p>{{obsolete_header(7.0)}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Renvoie la taille du fichier en octets.</p>
+
+<div class="note">Cette propriété est dépréciée. Utilisez {{domxref("Blob.size")}} à la place.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var size = <em>instanceOfFile</em>.fileSize</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Un nombre.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Blob.size")}}</li>
+</ul>
diff --git a/files/fr/web/api/file/index.html b/files/fr/web/api/file/index.html
new file mode 100644
index 0000000000..ef512c1156
--- /dev/null
+++ b/files/fr/web/api/file/index.html
@@ -0,0 +1,119 @@
+---
+title: File
+slug: Web/API/File
+tags:
+  - DOM
+  - File
+translation_of: Web/API/File
+---
+<div>{{APIRef}}</div>
+
+<p>L’interface <strong><code>File</code></strong> fournit des informations sur des fichiers et permet au code JavaScript d’une une page web d’accéder à leurs contenus.</p>
+
+<p>Les objets <code>File</code> sont généralements obtenus à partir de :</p>
+
+<ul>
+ <li>l’objet {{domxref("FileList")}} retourné lorsque qu’un utilisateur ou une utilisatrice sélectionne des fichiers grâce à un élément {{HTMLElement("input")}} ;</li>
+ <li>l’objet {{domxref("DataTransfer")}} d’une opération de glisser-déposer ;</li>
+ <li>l’API <code>mozGetAsFile()</code> de l’élément {{domxref("HTMLCanvasElement")}}.</li>
+</ul>
+
+<p>Dans Gecko, le code privilégié peut créer des objets <code>File</code> représentant tout fichier local sans nécessiter une interaction de l’utilisateur ou de l’utilisatrice (voir {{anch("Notes d’implémentation")}} pour plus d’informations.)</p>
+
+<p>Un objet <code>File</code> est un genre spécifique de {{domxref("Blob")}}, et peut être utilisé dans tout contexte où un blob peut l’être. En particulier, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, et {{domxref("XMLHttpRequest", "", "send()")}} acceptent indifféremment des <code>Blob</code>s et des <code>File</code>s.</p>
+
+<p>Voir <a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utiliser des fichiers à partir d'applications web</a> pour plus d’informations et des exemples.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("File.File", "File()")}}</dt>
+ <dd>Renvoie un <code>File</code> nouvellement construit.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("File.lastModified")}} {{readonlyinline}}</dt>
+ <dd>Renvoie le temps de dernière modification du fichier, exprimé en millisecondes écoulées depuis l’ère UNIX (1er janvier 1970 à minuit).</dd>
+ <dt>{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{deprecated_inline}} {{gecko_minversion_inline("15.0")}}</dt>
+ <dd>Renvoie la {{jsxref("Date")}} de dernière modification du fichier.</dd>
+ <dt>{{domxref("File.name")}} {{readonlyinline}}</dt>
+ <dd>Renvoie le nom du fichier.</dd>
+ <dt>{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>Renvoie le chemin auquel l’URL du {{domxref("File")}} est relative.</dd>
+</dl>
+
+<p><code>File</code> implémente {{domxref("Blob")}}, et ainsi possède les propriétés suivantes :</p>
+
+<dl>
+ <dt>{{domxref("File.size")}} {{readonlyinline}}</dt>
+ <dd>Renvoie la taille du fichier en octets.</dd>
+ <dt>{{domxref("File.type")}} {{readonlyinline}}</dt>
+ <dd>Renvoie le type <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types">MIME</a>du fichier.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L’interface <code>File</code> ne définit aucune méthode, mais hérite des méthodes de l’interface {{domxref("Blob")}} :</em></p>
+
+<dl>
+ <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Blob</code> contenant les données du blob source comprises dans l’intervalle d’octets spécifié.</dd>
+ <dt>{{domxref("Blob.stream()", "Blob.stream()")}}</dt>
+ <dd>Transforme le <code>File</code> en un {{domxref("ReadableStream")}} pouvant être utilisé pour lire le contenu du <code>File</code>.</dd>
+ <dt>{{domxref("Blob.text()", "Blob.text()")}}</dt>
+ <dd>Transforme le <code>File</code> en un flux (<em>stream</em>) et le lit en entier. Renvoie une {{jsxref("promise", "promesse")}} qui se résoud en une {{domxref("USVString")}} (texte).</dd>
+ <dt>{{domxref("Blob.arrayBuffer()", "Blob.arrayBuffer()")}}</dt>
+ <dd>Transforme le <code>File</code> en un flux (<em>stream</em>) et le lit en entier. Retourne une {{jsxref("promise", "promesse")}} qui se résoud en un {{domxref("ArrayBuffer")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.File")}}</p>
+
+<h3 id="Notes_d’implémentation">Notes d’implémentation</h3>
+
+<ul>
+ <li>Dans Gecko, vous pouvez utiliser API depuis du code chrome. Voir <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> pour plus de détails. Pour l’utiliser depuis du code chrome, JSM, ou portée Bootstrap, vous devez l’importer en utilisant <code><a href="/en-US/docs/Components.utils.importGlobalProperties">Cu.importGlobalProperties</a>(['File']);</code></li>
+ <li>À partir de Gecko 6.0 {{geckoRelease("6.0")}}, le code privilégié (par exemple au sein d’une extension) peut passer un objet {{interface("nsIFile")}} au constructeur DOM <code>File</code> pour spécifier le fichier à référencer.</li>
+ <li>À partir de Gecko 8.0 {{geckoRelease("8.0")}}, vous pouvez utiliser <code>new File</code> pour créer des objets <code>File</code> depuis des composants XPCOM au lieu de devoir instancier les objets {{interface("nsIDOMFile")}} directement. Contrairement à {{domxref("Blob")}}, le constructeur prend le nom de fichier comme second argument. Le nom de fichier peut être une chaîne quelconque.
+  <pre class="syntaxbox">new File(
+  Array parts,
+  String filename,
+  BlobPropertyBag properties
+);</pre>
+ </li>
+ <li>Les propriétés et méthodes non standard suivantes ont été retirées de Gecko 7 {{geckoRelease("7.0")}} : {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Les propriétés standard {{domxref("File.name")}}, {{domxref("Blob.size")}}, et les méthodes de {{domxref("FileReader")}} devraient être utilisées à la place.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utiliser des fichiers à partir d'applications web</a></li>
+ <li>{{domxref("FileReader")}}</li>
+ <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> (pour du code privilégié s’exécutant dans Gecko, tel que des extensions de Firefox)</li>
+</ul>
diff --git a/files/fr/web/api/file/using_files_from_web_applications/index.html b/files/fr/web/api/file/using_files_from_web_applications/index.html
new file mode 100644
index 0000000000..f477f8f651
--- /dev/null
+++ b/files/fr/web/api/file/using_files_from_web_applications/index.html
@@ -0,0 +1,494 @@
+---
+title: Utiliser des fichiers à partir d'applications web
+slug: Web/API/File/Using_files_from_web_applications
+tags:
+  - Files
+  - HTML5
+  - Téléchargement
+  - ajax upload
+translation_of: Web/API/File/Using_files_from_web_applications
+---
+<p>{{APIRef("File API")}}{{draft}}</p>
+
+<p>Grâce à l'API File ajoutée au DOM avec HTML5, il est maintenant possible depuis une page web de proposer à l'utilisateur de sélectionner des fichiers locaux, puis d'en lire le contenu. Cette sélection est possible en utilisant un élément HTML {{ HTMLElement("input") }} ou par glisser-déposer.</p>
+
+<p>Vous pouvez utiliser si vous le souhaitez l'API DOM File depuis du code chrome d'extensions ou d'un autre navigateur ; notez cependant qu'il existe des fonctionnalités additionnelles auxquelles il vous faudra être attentif. Reportez-vous à <a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a> pour plus de détails.</p>
+
+<h2 id="Accéder_au(x)_fichier(s)_sélectionné(s)">Accéder au(x) fichier(s) sélectionné(s)</h2>
+
+<p>Examinez ce code HTML :</p>
+
+<pre class="brush: html">&lt;input type="file" id="input"&gt;</pre>
+
+<p>L'API File permet d'accèder à la {{ domxref("FileList") }} contenant les objets {{ domxref("File") }} qui correspondent aux fichiers selectionnés par l'utilisateur.</p>
+
+<p>Si l'utilisateur ne sélectionne qu'un seul fichier, on ne prendra en compte que le premier élément de la {{ domxref("FileList") }}.</p>
+
+<p>Pour accéder à un fichier sélectionné en utilisant un sélecteur DOM classique :</p>
+
+<pre class="brush: js">var fichierSelectionne = document.getElementById('input').files[0];</pre>
+
+<p>Pour accèder à un fichier sélectionné en utilisant un sélecteur <a href="http://jquery.com/" title="http://jquery.com/">jQuery</a> :</p>
+
+<pre class="brush: js"><code>var </code>fichierSelectionne <code>= $('#input').get(0).files[0];
+
+var </code>fichierSelectionne <code>= $('#input')[0].files[0];</code></pre>
+
+<div class="note">
+<p>Si vous rencontrez une erreur "<code>files is undefined</code>" : vous n'avez pas sélectionné le bon élément HTML, en oubliant qu'un sélecteur jQuery renvoie une liste d'éléments DOM correspondants. Récupérez l'élément DOM pour appeler sa méthode "<code>files</code>".</p>
+</div>
+
+<h2 id="Accéder_au(x)_fichier(s)_sélectionné(s)_sur_un_événement_change">Accéder au(x) fichier(s) sélectionné(s) sur un événement <em>change</em></h2>
+
+<p>Il est en outre possible (mais pas obligatoire) d'accéder à la {{ domxref("FileList") }} via l'événement <code>change</code> :</p>
+
+<pre class="brush: html">&lt;input type="file" id="input" onchange="handleFiles(this.files)"&gt;</pre>
+
+<p>La fonction <code>handleFiles()</code> est appelée avec un objet {{ domxref("FileList") }} contenant des objets {{ domxref("File") }} représentant les fichiers sélectionnés par l'utilisateur.</p>
+
+<p>Si vous souhaitez permettre à l'utilisateur de sélectionner plusieurs fichiers simmultanément, utilisez simplement l'attribut <code>multiple</code> de l'élément <code>input</code> :</p>
+
+<pre class="brush: html">&lt;input type="file" id="input" <strong>multiple</strong> onchange="handleFiles(this.files)"&gt;</pre>
+
+<p>La liste de fichiers passée à la fonction <code>handleFiles()</code> contient dans ce cas un seul objet {{ domxref("File") }} pour chaque fichier sélectionné par l'utilisateur.</p>
+
+<h3 id="Ajouter_dynamiquement_un_gestionnaire_d'événement_change">Ajouter dynamiquement un gestionnaire d'événement <em>change</em></h3>
+
+<p>Dans le cas où votre champ input a été créé à l'aide d'une bibliothèque JavaScript comme <a class="external" href="http://www.jquery.com/" title="http://www.jquery.com/">jQuery</a>, il vous faudra utiliser la méthode {{ domxref("EventTarget.addEventListener()") }} pour ajouter le gestionnaire d'événement <code>change</code>, comme cela :</p>
+
+<pre class="brush: js">var inputElement = document.getElementById("inputField");
+inputElement.addEventListener("change", handleFiles, false);
+function handleFiles() {
+  var fileList = this.files; /* Vous pouvez maintenant manipuler la liste de fichiers */
+}</pre>
+
+<p>Notez que dans ce cas la fonction <code>handleFiles()</code> est elle-même le gestionnaire d'événement, contrairement à l'exemple précédent où un gestionnaire d'événement l'appelle en lui passant un paramètre.</p>
+
+<h2 id="Obtenir_des_informations_sur_le(s)_fichier(s)_sélectionné(s)">Obtenir des informations sur le(s) fichier(s) sélectionné(s)</h2>
+
+<p>L'objet {{ domxref("FileList") }} exposé par le DOM fournit la liste de tous les fichiers sélectionnés par l'utilisateur, chaque fichier étant identifié par un objet {{ domxref("File") }}. Vous pouvez en déterminer le nombre en récupérant la valeur de l'attribut <code>length</code> de la liste de fichiers :</p>
+
+<pre class="brush: js"><code>var numFiles = files.length;</code></pre>
+
+<p>Chaque objet {{ domxref("File") }} peut être simplement récupéré en accédant à la liste comme vous le feriez pour un tableau :</p>
+
+<pre class="brush: js">for (var i = 0, numFiles = files.length; i &lt; numFiles; i++) {
+  var file = files[i];
+  ..
+}
+</pre>
+
+<p>La boucle parcourt l'ensemble des fichiers de la liste.</p>
+
+<p>L'objet {{ domxref("File") }} expose trois attributs accessibles en lecture seulement et contenant des informations utiles sur le fichier.</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Une chaîne de caractères contenant le nom du fichier uniquement, sans aucune information relative au chemin d'accès.</dd>
+ <dt><code>size</code></dt>
+ <dd>La taille du fichier exprimée en octets, sous la forme d'un entier de 64 bits.</dd>
+ <dt><code>type</code></dt>
+ <dd>Le type MIME du fichier sous la forme d'une chaîne de caractères, ou bien une chaîne vide <code>""</code> si le type ne peut pas être déterminé.</dd>
+</dl>
+
+<h3 id="Exemple_Afficher_la_taille_d'un_ou_plusieurs_fichiers">Exemple : Afficher la taille d'un ou plusieurs fichiers</h3>
+
+<p>L'exemple suivant montre une utilisation possible de la propriété <code>size</code> :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"&gt;
+&lt;title&gt;File(s) size&lt;/title&gt;
+&lt;script&gt;
+function updateSize() {
+  var nBytes = 0,
+      oFiles = document.getElementById("uploadInput").files,
+      nFiles = oFiles.length;
+  for (var nFileId = 0; nFileId &lt; nFiles; nFileId++) {
+    nBytes += oFiles[nFileId].size;
+  }
+  var sOutput = nBytes + " bytes";
+  // partie de code facultative pour l'approximation des multiples
+  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox &gt; 1; nApprox /= 1024, nMultiple++) {
+    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+  }
+  // fin de la partie de code facultative
+  document.getElementById("fileNum").innerHTML = nFiles;
+  document.getElementById("fileSize").innerHTML = sOutput;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="updateSize();"&gt;
+&lt;form name="uploadForm"&gt;
+&lt;p&gt;&lt;input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple&gt; selected files: &lt;span id="fileNum"&gt;0&lt;/span&gt;; total size: &lt;span id="fileSize"&gt;0&lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send file"&gt;&lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Utiliser_des_éléments_input_masqués_de_type_file_avec_l'événement_click">Utiliser des éléments <em>input </em>masqués de type <em>file </em>avec l'événement <code>click</code></h2>
+
+<p>Il est possible depuis Gecko 2.0 {{ geckoRelease("2.0") }} de masquer l'élément {{ HTMLElement("input") }} de type file, généralement considéré comme laid, et de présenter votre propre interface pour l'ouverture du sélecteur de fichiers et l'affichage du ou des fichiers sélectionnés par l'utilisateur. Vous devez pour cela attribuer à votre élément <code>input</code> un style incluant <code>display:none</code> et gérer l'événement <code>click</code> sur votre élément {{ HTMLElement("input") }}.</p>
+
+<p>Examinez cet extrait de code HTML :</p>
+
+<pre class="brush: html">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;</pre>
+
+<p>Le code gérant l'événement <code>click</code> peut être écrit de cette façon :</p>
+
+<pre class="brush: js">var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // empêche la navigation vers "#"
+}, false);
+</pre>
+
+<p>Vous pouvez bien sûr appliquer le style de votre choix au nouveau bouton d'ouverture du sélecteur de fichiers.</p>
+
+<h2 id="Utiliser_un_élément_label_pour_activer_un_élément_input_masqué_de_type_file">Utiliser un élément <em>label </em>pour activer un élément <em>input </em>masqué de type <em>file</em></h2>
+
+<p>Un élément {{ HTMLElement("label") }} peut être utilisé pour ouvrir le sélecteur de fichiers sans l'aide de JavaScript (méthode <code>click()</code>).</p>
+
+<p>Examinez ce morceau de code HTML :</p>
+
+<pre class="brush: html">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt; &lt;label for="fileElem"&gt;Select some files&lt;/label&gt;</pre>
+
+<p>Il n'y a pas besoin d'ajouter du code JavaScript pour l'appel à <code>fileElem.click()</code>. Vous pouvez dans ce cas aussi appliquer le style de votre choix à l'élément <code>label</code>.</p>
+
+<h2 id="Sélectionner_des_fichiers_en_utilisant_drag_and_drop">Sélectionner des fichiers en utilisant <em>drag and drop</em></h2>
+
+<p>Vous pouvez aussi autoriser l'utilisateur à glisser-déposer (<em>drag and drop</em>) des fichiers dans votre application web.</p>
+
+<p>La première étape consiste définir une zone de dépôt. La délimitation exacte de la partie de votre page qui acceptera des dépôts dépend de la conception de votre application, mais il est facile d'autoriser un élément à capter des événements <code>drop</code> :</p>
+
+<pre class="brush: js">var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+</pre>
+
+<p>Dans cet exemple, l'élément portant l'ID <code>dropbox</code> devient notre zone de dépôt en y ajoutant les gestionnaires d'écoute des événements {{event('dragenter')}}, {{event('dragover')}}, et {{event('drop')}}.</p>
+
+<p>Nous n'avons pas vraiment besoin dans notre cas de gérer les événements <code>dragenter</code> et <code>dragover</code>. Les deux fonctions associées restent donc assez simples, elle ne servent qu'à stopper la propagation de l'événement et empêcher le déclenchement de l'action par défaut :</p>
+
+<pre class="brush: js">function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+</pre>
+
+<p>La vraie magie est dans la fonction <code>drop()</code> :</p>
+
+<pre class="brush: js">function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}</pre>
+
+<p>Nous récupérons ici le champ <code>dataTransfer</code> de l'événement puis nous en extrayons la liste des fichiers que nous passons à <code>handleFiles()</code>. À partir de ce point les fichiers se manipulent de la même façon, que l'utilisateur ait employé l'élément <code>input</code> ou le glisser-déposer.</p>
+
+<h2 id="Exemple_Afficher_les_miniatures_d'images_sélectionnées_par_l'utilisateur">Exemple : Afficher les miniatures d'images sélectionnées par l'utilisateur</h2>
+
+<p>Admettons que vous développiez actuellement le prochain site génial de partage de photos, et que vous souhaitiez utiliser HTML5 pour afficher une prévisualisation miniature des images avant que l'utilisateur ne les télécharge vraiment sur le serveur. Vous pouvez définir votre élément <code>input</code> ou votre zone de dépôt comme étudié précédemment et les faire appeler une fonction telle que la fonction <code>handleFiles()</code> montrée ci-dessous :</p>
+
+<pre class="brush: js">function handleFiles(files) {
+  for (var i = 0; i &lt; files.length; i++) {
+    var file = files[i];
+    var imageType = /^image\//;
+
+    if (!imageType.test(file.type)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // En admettant que "preview" est l'élément div qui contiendra le contenu affiché.
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+</pre>
+
+<p>La boucle qui manipule dans notre cas les fichiers sélectionnés par l'utilisateur examine l'attribut type de chaque fichier et contrôle qu'il s'agit bien d'une image (en utilisant une expression régulière pour vérifier la correspondance du type MIME avec la chaîne "<code>image/*</code>"). Nous créons un nouvel élément img pour chaque fichier image. Vous pouvez utiliser du CSS pour définir d'agréables bordures ou effets d'ombres ou encore pour préciser la taille de l'image [de l'élément <code>img</code>, NDT], même si cela n'est pas nécessaire ici.</p>
+
+<p>La classe CSS ob<code>j</code> est ajoutée à chaque élément image afin de faciliter sa recherche dans l'arbre du DOM, ainsi qu'un attribut <code>file</code> spécifiant le {{ domxref("File") }} correspondant et qui nous permettra de récupérer les fichiers images lors du téléchargement effectif vers le serveur. Nous utilisons {{ domxref("Node.appendChild()") }} pour ajouter la nouvelle miniature à la zone de prévisualisation de notre document.</p>
+
+<p>Nous définissons ensuite le {{ domxref("FileReader") }} qui gérera le chargement asynchrone de l'image et son lien à l'élément <code>img</code>. Après avoir créé le nouvel objet <code>FileReader</code>, nous définissons sa fonction <code>onload</code> pouis nous appelons <code>readAsDataURL()</code> pour démarrer l'opération de lecture en tâche de fond. Lorsque le chargement du fichier image est complètement terminé, son contenu est converti en <code>data</code> : c'est l'URL transmise à la fonction de rappel <code>onload</code>. Notre implémentation de cette procédure définit l'image chargée comme valeur de l'attribut <code>src</code> de l'élement <code>img</code>, faisant ainsi apparaître l'image dans la miniature à l'écran.</p>
+
+<h2 id="Utiliser_un_objet_URLs">Utiliser un objet URLs</h2>
+
+<p>Gecko 2.0 {{ geckoRelease("2.0") }} introduit la prise en charge des méthodes du DOM {{ domxref("window.URL.createObjectURL()") }} et {{ domxref("window.URL.revokeObjectURL()") }}. Elles vous permettent de créer des chaînes d'URL simples qui peuvent être utilisées pour repérer n'importe quelle donnée pouvant être référencée à l'aide d'un objet DOM {{ domxref("File") }}, y compris des fichiers locaux sur l'ordinateur de l'utilisateur.</p>
+
+<p>Vous pouvez procéder ainsi pour créer un objet URL lorsque vous souhaitez référencer un objet {{ domxref("File") }} par URL depuis HTML :</p>
+
+<pre class="brush: js"><code>var objectURL = window.URL.createObjectURL(fileObj);</code></pre>
+
+<p>L'objet URL est une chaîne identifiant l'objet {{ domxref("File") }}. Un objet URL unique est créé à chaque fois que vous appelez {{ domxref("window.URL.createObjectURL()") }}, même si vous avez déjà créé un objet URL pour ce fichier. Chacun d'eux doit être libéré ; bien qu'ils soient automatiquement libérés lorsque le document est déchargé, vous devez explicitement les libérer en appelant {{ domxref("window.URL.revokeObjectURL()") }}  si votre page les utilise de manière dynamique :</p>
+
+<pre class="brush: js"><code>window.URL.revokeObjectURL(objectURL);</code></pre>
+
+<h2 id="Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images">Exemple : Utilisation de l'objet URLs pour afficher des images</h2>
+
+<p>Cet exemple utilise des objets URLs pour afficher des vignettes d'image. Il affiche en outre d'autres informations, dont leurs noms et leurs tailles.</p>
+
+<p>Le code HTML qui présente l'interface ressemble à ceci:</p>
+
+<pre class="brush: html"><code>&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Sélectionnez des fichiers&lt;/a&gt;
+&lt;div id="fileList"&gt;
+  &lt;p&gt;Aucun fichier sélectionné !&lt;/p&gt;
+&lt;/div&gt;</code></pre>
+
+<p>Ce code définit notre élément fichier {{ HTMLElement("input") }}, ainsi qu'un lien qui appelle le sélecteur de fichiers (l'élément <code>input</code> étant masqué pour éviter l'affichage de la si peu séduisante interface utilisateur). Vous pouvez vous reporter à la section {{ anch("Using hidden file input elements using the click() method") }} pour des explications détaillées sur cette partie de code ainsi que sur la méthode appelant le sélecteur de fichiers.</p>
+
+<p>Voici la méthode <code>handleFiles()</code> :</p>
+
+<pre class="brush: js"><code>window.URL = window.URL || window.webkitURL;
+
+var fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // empêche la navigation vers "#"
+}, false);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "&lt;p&gt;Aucun fichier sélectionné !&lt;/p&gt;";
+  } else {
+    fileList.innerHTML = "";
+    var list = document.createElement("ul");
+    fileList.appendChild(list);
+    for (var i = 0; i &lt; files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.URL.createObjectURL(files[i]);
+      img.height = 60;
+      img.onload = function() {
+        window.URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}</code></pre>
+
+<p>Nous commençons par la recherche de l'URL du {{ HTMLElement("div") }} dont l'ID est <code>fileList</code>, qui est le bloc dans lequel nous inérerons notre liste de fichiers, ainsi que les miniatures..</p>
+
+<p>Si l'objet {{ domxref("FileList") }} passé à <code>handleFiles()</code> est <code>null</code>, nous définissons simplement le contenu HTML du bloc pour pour afficher "Aucun fichier sélectionné ! ". Nous commençons dans le cas contraire à construire notre liste de fichiers, comme ceci :</p>
+
+<ol>
+ <li>Une nouvelle liste non ordonnée ({{ HTMLElement("ul") }}) est créée.</li>
+ <li>L'élement de la liste nouvellement créée est ajoutée dans le bloc {{ HTMLElement("div") }} en appelant sa méthode {{ domxref("Node.appendChild()") }}.</li>
+ <li>Pour chaque {{ domxref("File") }} dans le {{ domxref("FileList") }} représenté par <code>files</code> :
+  <ol>
+   <li>Création et ajout à la liste d'un nouvel élément de liste {{ HTMLElement("li") }}.</li>
+   <li>Création d'un nouvel élément image {{ HTMLElement("img") }}.</li>
+   <li>Définition d'un nouvel objet URL représentant le fichier comme source de l'image, en utilisant {{ domxref("window.URL.createObjectURL()") }} pour la création de l'URL du Blob.</li>
+   <li>Définition de la hauteur de l'image à 60 pixels.</li>
+   <li>Définition du gestionnaire pour l'événement <code>load</code> de l'image afin de libérer l'objet URL, devenu inutile une fois l'image chargée. La libération est effectuée en appelant la méthode {{ domxref("window.URL.revokeObjectURL()") }} avec en paramètre la chaîne de l'objet URL de l'attribut <code>img.src</code>.</li>
+   <li>Ajout du nouvel élément à la liste.</li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Exemple_Télécharger_sur_le_serveur_un_fichier_sélectionné_par_l'utilisateur">Exemple : Télécharger sur le serveur un fichier sélectionné par l'utilisateur</h2>
+
+<p>Vous pourriez en outre vouloir autoriser l'utilisateur à télécharger sur un serveur (<em>upload</em>) un ou plusieurs fichiers sélectionnés (tels que les images sélectionnées en suivant l'exemple précedent). Cette opération peut être très facilement effectuée de manière asynchrone.</p>
+
+<h3 id="Créer_les_tâches_de_téléchargement">Créer les tâches de téléchargement</h3>
+
+<p>En poursuivant avec le code générant des miniatures de l'exemple précédent, rappelez-vous que chaque image de miniature s'est vue ajouter la classe CSS <code>obj</code>, ainsi que le {{ domxref("File") }} correspondant stocké dans l'attribut <code>file</code>. Cela nous permet de sélectionner très facilement toutes les images choisies par l'utilisateur pour le téléchargement à l'aide de {{ domxref("Document.querySelectorAll()") }}, comme cela :</p>
+
+<pre class="brush: js">function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i &lt; imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+</pre>
+
+<p>La ligne 2 crée un tableau, nommé <code>imgs</code>, de tous les éléments de la classe CSS <code>obj</code> dans le document ; s'agit dans notre cas de toutes les miniatures d'images. Une fois la liste établie, c'est un jeu d'enfant de la parcourir et de créer une nouvelle instance de <code>FileUpload</code> pour chacun de ses éléments. Chacune de ces instances gère le téléchargement du fichier correspondant vers le serveur.</p>
+
+<h3 id="Manipuler_le_processus_de_téléchargement_pour_un_fichier">Manipuler le processus de téléchargement pour un fichier</h3>
+
+<p>La fonction <code>FileUpload</code> accepte deux arguments : un élement image et un fichier à partir duquel les données de l'image sont lues.</p>
+
+<pre class="brush: js">function FileUpload(img, file) {
+  var reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.sendAsBinary(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+</pre>
+
+<p>La fonction <code>FileUpload()</code> montrée ci-dessus crée un indicateur d'activité (<em>throbber</em>) pour l'affichage de la progression, ainsi qu'un {{ domxref("XMLHttpRequest") }} pour gérer le téléchargement des données.</p>
+
+<p>Il est nécessaire de prévoir quelques étapes préparatoires avant le téléchargement effectif des données :</p>
+
+<ol>
+ <li>Le processus d'écoute de l'événement <code>progress</code> du XMLHttpRequest est écrit de telle façon que l'indicateur d'activité affiche l'information de progression du téléchargement la plus récente. </li>
+ <li>Le gestionnaire de l'événement <code>load</code> du XMLHttpRequest est écrit pour que l'indicateur d'activité affiche 100% afin d'être sûr atteigne effectivement les 100%, même en cas granularité anormale lors du processus. Le gestionnaire supprime ensuite l'indicateur devenu inutile, entraînant sa disparition à la fin normale du téléchargement.</li>
+ <li>La requête de téléchargement de l'image est ouverte par l'appel à la méthode <code>open()</code> du XMLHttpRequest, démarrant la création d'une requête POST.</li>
+ <li>Le type MIME pour le téléchargement est défini en appelant la fonction <code>overrideMimeType()</code> du <code>XMLHttpRequest</code>. Nous utilisons ici un type MIME générique ; vous pouvez selon les cas définir ou ne définir aucun type MIME.</li>
+ <li>L'objet <code>FileReader</code> est utilisé pour la conversion du fichier en chaîne binaire.</li>
+ <li>La fonction <code>send()</code> du  XMLHttpRequest est appelée en dernier pour télécharger le contenu du fichier complètement chargé.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note :</strong> la méthode non standard <code>sendAsBinary</code> utilisée dans l'exemple ci-dessus est obsolète depuis Gecko 31 {{ geckoRelease(31) }} ; utilisez plutôt la méthode standard <code>send(Blob data)</code>. </p>
+</div>
+
+<h3 id="Gérer_le_processus_de_téléchargement_d'un_fichier_de_manière_asynchrone">Gérer le processus de téléchargement d'un fichier de manière asynchrone</h3>
+
+<pre class="brush: html">&lt;?php
+if (isset($_FILES['myFile'])) {
+    // Exemple:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?&gt;
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;dnd binary upload&lt;/title&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
+    &lt;script type="text/javascript"&gt;
+        function sendFile(file) {
+            var uri = "/index.php";
+            var xhr = new XMLHttpRequest();
+            var fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
+                    // Handle response.
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            var dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                var filesArray = event.dataTransfer.files;
+                for (var i=0; i&lt;filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+         }
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div&gt;
+        &lt;div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;"&gt;Drag &amp; drop your file here...&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Exemple_Utiliser_un_objet_URLs_pour_afficher_un_PDF">Exemple : Utiliser un objet URLs pour afficher un PDF</h2>
+
+<p>Vous pouvez utiliser un objet URLs pour d'autres choses que les images ! Ils peuvent être utilisés pour afficher des fichiers PDF incorporés ou toutes autres ressources affichables par le navigateur.</p>
+
+<p>Sous Firefox, la constante de configuration <code>pdfjs.disabled</code> doit être définie à <code>false</code> {{non-standard_inline()}} pour afficher les PDF encapsulés dans dans un {{ HTMLElement("iframe") }} plutôt que de s'en voir proposer le téléchargement sur le PC local.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>iframe</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>viewer<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Et voici comment modifier la valeur de l'attribut <code>src</code> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> obj_url <span class="operator token">=</span> window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">createObjectURL</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> iframe <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'viewer'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+iframe<span class="punctuation token">.</span><span class="function token">setAttribute</span><span class="punctuation token">(</span><span class="string token">'src'</span><span class="punctuation token">,</span> obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span>
+window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">revokeObjectURL</span><span class="punctuation token">(</span>obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Exemple_Utiliser_un_objet_URLs_avec_d'autres_types_de_fichiers">Exemple : Utiliser un objet URLs avec d'autres types de fichiers</h2>
+
+<p>Vous pouvez manipuler de la même façon des fichiers d'autres formats. Voici comment prévisualiser une vidéo téléchargée sur le serveur :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> video <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'video'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> obj_url <span class="operator token">=</span> window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">createObjectURL</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+video<span class="punctuation token">.</span>src <span class="operator token">=</span> obj_url<span class="punctuation token">;</span>
+video<span class="punctuation token">.</span><span class="function token">play</span><span class="punctuation token">(</span><span class="punctuation token">)</span>
+window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">revokeObjectURL</span><span class="punctuation token">(</span>obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-%28type=file%29" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (HTML 5 working draft)</li>
+ <li><a href="http://www.w3.org/TR/FileAPI/" title="http://www.w3.org/TR/FileAPI/">File API</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("File") }}</li>
+ <li>{{ domxref("FileList") }}</li>
+ <li>{{ domxref("FileReader") }}</li>
+ <li><a href="/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a></li>
+ <li>{{ domxref("XMLHttpRequest") }}</li>
+ <li><a class="external" href="http://www.jquery.com/" title="http://www.jquery.com/">jQuery</a> JavaScript library</li>
+</ul>