Retourner à la page d'accueil de TJS

Script upload2 : Upload de fichiers avec drag and drop

Sélection de fichiers par drag and drop et pré-visualisation
Partie II : L'interactivité / Chapitre 13 : Les formulaires / Page 210

Exécution du script

Emulation de la console

Code source

<html><head><title>Upload de fichiers via drag and drop</title></head><body><h1>Upload de fichiers via drag and drop</h1><form id="form1" name="monForm" method="post" action="upload.php" enctype="multipart/form-data" ><div class="bloc"><label>Choisissez vos images :</label></div><div id="depose">Déposez vos images ou cliquez pour les choisir</div><input type="file" name="monFichier" id="file" accept="image/*" required multiple style="display:none"/></div><div class="bloc" id="preview"></div><div>  <input type="submit" value="Envoyer l'image"></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];    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);     /* Attacher les élements HTML au DOM */    div.appendChild(vignette);    div.appendChild(span);    p.appendChild(div);  }  p.style.display="block";  });/* 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;    }    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;}        div.bloc {    padding:5px;    border:1px solid #aaa;    margin:10px;}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;}</style></body></html>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 22/08/2019 13:12:00 sur php7 en 109.3 ms