From 7dfc35cd636270d13dfd100877a8b18dd7b23f7b Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Thu, 17 Mar 2022 14:27:43 +0100
Subject: fix broken example after #4270 (#4677)
---
.../using_files_from_web_applications/index.md | 78 +++++++++++-----------
1 file changed, 39 insertions(+), 39 deletions(-)
diff --git a/files/fr/web/api/file/using_files_from_web_applications/index.md b/files/fr/web/api/file/using_files_from_web_applications/index.md
index 7f44245d7a..d0e8f39f0a 100644
--- a/files/fr/web/api/file/using_files_from_web_applications/index.md
+++ b/files/fr/web/api/file/using_files_from_web_applications/index.md
@@ -416,59 +416,59 @@ Il est nécessaire de prévoir quelques étapes préparatoires avant le téléch
### Gérer le processus de téléchargement d'un fichier de manière asynchrone
-```html
+Cet exemple utilise PHP pour la partie serveur et JavaScript pour la partie client. Il illustre comment gérer l'<i lang="en">upload</i> d'un fichier de façon asynchrone.
+
+```js
<?php
-if (isset($_FILES['myFile'])) {
- // Exemple:
- move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+if (isset($_FILES['monFichier'])) {
+ // Exemple :
+ move_uploaded_file($_FILES['monFichier']['tmp_name'], "uploads/" . $_FILES['monFichier']['name']);
exit;
}
-?>
-<!DOCTYPE html>
+?><!DOCTYPE html>
<html>
<head>
<title>dnd binary upload</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <script type="text/javascript">
+ <script type="application/javascript">
function sendFile(file) {
- var uri = "/index.php";
- var xhr = new XMLHttpRequest();
- var fd = new FormData();
-
-
-
-
-
-
-
-
-
-
-
+ const uri = "/index.php";
+ const xhr = new XMLHttpRequest();
+ const fd = new FormData();
+
+ xhr.open("POST", uri, true);
+ xhr.onreadystatechange = function() {
+ if (xhr.readyState == 4 && xhr.status == 200) {
+ alert(xhr.responseText); // gestion de la réponse.
+ }
+ };
+ fd.append('monFichier', file);
+ // Initier un upload multipart/form-data
+ xhr.send(fd);
}
-
- ndow
- var d
- dropzone.ondragover = dropz
-
+
+ window.onload = function() {
+ const dropzone = document.getElementById("dropzone");
+ dropzone.ondragover = dropzone.ondragenter = function(event) {
+ event.stopPropagation();
event.preventDefault();
- }
-
- dropzone.ond
- event.stopPropagation();
- event.preventDefault();
-
- v
-
-
-
- }
- }
+ }
+
+ dropzone.ondrop = function(event) {
+ event.stopPropagation();
+ event.preventDefault();
+
+ const filesArray = event.dataTransfer.files;
+ for (let i=0; i<filesArray.length; i++) {
+ sendFile(filesArray[i]);
+ }
+ }
+ }
</script>
</head>
<body>
<div>
- <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
+ <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Glisser-déposer votre fichier ici…</div>
</div>
</body>
</html>
--
cgit v1.2.3-54-g00ecf