Script upload : Upload de fichiers via formulaire

Sélection de fichiers et pré-visualisation

Partie II : L'interactivité

Edition 1 | Chapitre 13 : Les formulaires / Page 209

Edition 2 | Chapitre 13 : Les formulaires / Page 225

Edition 3 | Chapitre 13 : Les formulaires / Page 225

<html>
<head>
<title>Upload de fichiers</title>
</head>
<body>
<h1>Upload de fichiers</h1>
<form id="form1" name="monForm" method="post" action="upload.php" enctype="multipart/form-data" >
<div class="bloc">
<label>Choisissez vos images :</label>
<input type="file" name="monFichier" id="file" accept="image/*" required multiple />
</div>
<div class="bloc" id="preview"></div>
<div><input type="submit" value="Envoyer l'image">
</div>
</form>
<script>
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"; }
}
console.log(getHumanSize(1050)); // 1.0 ko
console.log(getHumanSize(400000)); // 390.6 ko
console.log(getHumanSize(5000000)); // 4.8 Mo
</script>
<style type="text/css">
body {min-height:600px; 
}
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</title></head><body><h1>Upload de fichiers</h1><form id="form1" name="monForm" method="post" action="upload.php" enctype="multipart/form-data" ><div class="bloc"><label>Choisissez vos images :</label><input type="file" name="monFichier" id="file" accept="image/*" required multiple /></div><div class="bloc" id="preview"></div><div>  <input type="submit" value="Envoyer l'image"></div></form><script>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";    }}console.log(getHumanSize(1050));    // 1.0 koconsole.log(getHumanSize(400000));  // 390.6 koconsole.log(getHumanSize(5000000)); // 4.8 Mo</script><style type="text/css">body {  min-height:600px;    }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...