Retourner à la page d'accueil de TJS

Script upload : Upload de fichiers via formulaire

Sélection de fichiers et pré-visualisation
Partie II : L'interactivité / Chapitre 13 : Les formulaires / Page 209

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>

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...
Le 24/10/2019 06:05:37 sur php7 en 51.14 ms