Faire une uploadeur d'image en HTML 5

Bon, j'ai pas pu tester, mon FF n'est pas à jour

Mais j'espère que ce code est fonctionnel.

<!DOCTYPE html>
<head></head>
<body>
<p>Glissez-posez des images dans le cadre ci-dessous.</p>
<div id="dropbox" style="width:100px; height:100px; border:1px solid black;"></div>
<div id="preview"></div>

<script>
window.onload=function() {
  var dropbox = document.getElementById("dropbox");
  dropbox.addEventListener("dragenter", dragenter, false);
  dropbox.addEventListener("dragover", dragover, false);
  dropbox.addEventListener("drop", drop, false);
};

/* Les fonctions dragenter et dragover ne font strictement rien. */

function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

function drop(e) { // Lors du lâcher des fichiers dans la zone
  var dt = e.dataTransfer; // On récupère le transfert
  var files = dt.files; // et les fichiers.

  handleFiles(files); // On appelle une fonction pour traiter les fichiers
  e.stopPropagation();
  e.preventDefault();
}

function handleFiles(files) { // La fonction qui traîte les fichiers.
  var preview = document.getElementById("preview");

  for (var i = 0; i < files.length; i++) { // Pour chacun des fichiers
    var file = files[i];
    var imageType = /image.*/;

    if (!file.type.match(imageType)) { // On s'assure que le type MIME correspond bien à une image
      continue;
    }

    var img = document.createElement("img"); // On crée un <img>
    img.file = file; // on met une propriété file contenant le fichier (pour un upload futur)
    preview.appendChild(img); // on insère dans le <div id="preview">

    var reader = new FileReader(); // On crée un FileReader pour lire le fichier
    // Une fois le fichier lu, on mettra le résultat de la lecture dans le src de l'image
    reader.onloadend = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file); // On lance la lecture du fichier (ici, obtention de l'url je crois)
  }
}
</script>
</body>

J'ai repris le code de la page du MDC.
Normalement, quand tu glisses-déposes une ou plusieurs images dans le carré, ça devrait les afficher en dessous.

Chaque variable représentant une image a une propriété "file" qui contient l'objet File du fichier. C'est lui que tu dois utiliser pour l'upload.

(Je vais essayer de mettre mon FF à jour (linux me saoule...) pour approfondir tout ça).

dededede4

28 décembre 2009 à 15:25:46

Salut !
En HTML5 on peut faire un truc de ouf, c'est un système d'upload qui permet à l'utilisateur de glisser-poser l'image depuis son bureau vers un site web.

Donc je RTFM :
https://developer.mozilla.org/en/Using [...] _applications
Mais moi et l'anglais... :-°

Je me disais donc si vous connaissiez un petit tuto en français voire même un code source tout petit...

Une idée ?
Merci !

Golmote

28 décembre 2009 à 16:59:38

C'est magique.. mais j'pige rien.

Faire une uploadeur d'image en HTML 5

Supprimer

Modérer

Signaler le message aux modérateurs