Script upload2 : Upload de fichiers avec drag and drop

Sélection de fichiers par drag and drop et pré-visualisation

Partie II : L'interactivité

Edition 1 | Chapitre 13 : Les formulaires / Page 210

Edition 2 | Chapitre 13 : Les formulaires / Page 226

Edition 3 | Chapitre 13 : Les formulaires / Page 226

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

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>

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