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

<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>

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>

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...