Script ajaxFile : Upload de fichier avec AJAX
Upload de fichier avec suivi de la progression
Partie II : L'interactivité
Edition 1 | Chapitre 14 : Les appels AJAX / Page 225
Edition 2 | Chapitre 14 : Les appels AJAX / Page 241
Edition 3 | Chapitre 14 : Les appels AJAX / Page 241
Exécution du script
Emulation de la console
Code source
<html><head><title>Upload de fichiers via AJAX</title></head><body><h1>Upload de fichiers via AJAX</h1><form id="form1" name="monForm"><div class="bloc"><label>Choisissez votre photo :</label></div><div id="depose">Déposez votre image ou cliquez pour la choisir</div><input type="file" name="monFichier" id="file" accept="image/*" required style="display:none"/></div><div class="bloc" id="preview"></div></form><script>var depose=document.getElementById("depose");/* Gestion du clic */depose.addEventListener("click", function(evt) { evt.preventDefault(); document.getElementById("file").click();});/* Gestion du DRAG AND DROP */depose.addEventListener("dragover", function(evt) { evt.preventDefault(); /* Pour autoriser le drop par JS */});depose.addEventListener("dragenter", function(evt) { this.className="onDropZone"; /* Passe en surbrillance */});depose.addEventListener("dragleave", function(evt) { this.className=""; /* La surbrillance s'efface */}); depose.addEventListener("drop", function(evt) { evt.preventDefault(); /* Tranfert de la liste des fichiers du drag and drop dans input file */ document.getElementById("file").files=evt.dataTransfer.files; this.className=""; /* Surbrillance supprimée */});document.getElementById("file").addEventListener("change", function(evt){ var p=document.getElementById("preview"); /* Bloc d'affichage de la liste des fichiers */ p.innerHTML=""; /* Effacer le contenu initial de #preview */ for (var i=0; i<this.files.length; i++) { var f=this.files[i]; /* Créer les élements de prévisualisation */ var div=document.createElement("div"); div.className="fichier"; var span=document.createElement("span"); span.innerHTML=f.name+" ("+getHumanSize(f.size)+")"; var vignette=document.createElement("img"); vignette.src = window.URL.createObjectURL(f); var barre=document.createElement("div"); /* Barre de progression */ barre.className="progress"; barre.setAttribute("id", "progress"+i); barre.innerHTML="<span class=\"progress\" style=\"width:0%\"></span>"; var clear=document.createElement("div"); clear.className="clear"; /* Attacher les élements HTML au DOM */ div.appendChild(vignette); div.appendChild(span); div.appendChild(barre); div.appendChild(clear); p.appendChild(div); /* Démarrer l'appel AJAX d'upload */ uploadFileAjax(f, i); } p.style.display="block"; });/* Lance l'upload et le suivi de progression */function uploadFileAjax(file, numero) { var ajax=new XMLHttpRequest(); /* Ajout du suivi de la progression */ ajax.upload.onprogress = function(evt) { /* Le navigateur supporte le suivi de progression */ if (evt.lengthComputable) { var pct = (evt.loaded / evt.total) * 100; var bar=document.querySelector("#progress"+numero).querySelector("span"); bar.style.width=Math.round(pct)+"%"; console.log(pct + " % envoyé"); } }; /* Détection de la fin de l'appel */ ajax.onload = function() { if (this.status == 200) { /* Le service a bien répondu */ document.querySelector("div#progress"+numero).innerHTML="Envoi réussi"; } } /* Détection d'une erreur */ ajax.onerror = function() { console.log("Le fichier n'a pas été reçu correctement..."); /* Informer l'utilisateur par une notification */ document.querySelector("div#progress"+numero).innerHTML="Echec de l'envoi"; } /* Préparation de la requête et envoi */ ajax.open("POST", "/api/uploadFileAjax.php", true); var data=new FormData(); data.append("monFichier", file); ajax.send(data);}/* Retourne une taille de fichier en mode lisible par un humain */function getHumanSize(s) { s=parseInt(s); /* Pour s'assurer que le paramètre d'entrée est entier */ if (s<1024) { return s+" o"; } else if (s<1024*1024) { return (s/1024).toFixed(1)+" ko"; } else if (s<1024*1024*1024) { return (s/1024/1024).toFixed(1)+" Mo"; } else { return (s/1024/1024/1024).toFixed(1)+" Go"; }}</script><style type="text/css">body { min-height:600px; }/* CSS de la zone de dépose drag and drop */ div#depose { height:80px; font-size:20px; line-height: 80px; color:#999; text-align: center; padding:10px; margin:10px; border:2px dashed #999; border-radius: 5px; overflow: hidden; cursor: pointer;} div#depose.onDropZone { color:#000; border:5px solid #6f6; padding:7px;} /* CSS pour la prévisualiation des images sélectionnées */div#preview { display:none;}div.fichier { padding:5px; background: #ccc; margin-top:1px;}div.fichier img { max-height: 80px; max-width: 80px; margin-right:10px; vertical-align: middle; float:left;}div.clear { clear:both;}/* CSS de la barre de progression */div.progress { display:block; width:200px; height:15px; border:1px solid #666; padding:3px; margin:4px; margin-left: 90px; border-radius: 4px; background-color:#fff;}div.progress span.progress { display:block; background-color:#0b4bd8; height:15px;}</style></body></html>