Simple upload en drag and drop avec HTML5 / Jquery / PHP

Il existe actuellement plusieurs plugins qui gèrent les uploads en drag and drop avec HTML5, et avec une pléthore d’options. Mais c’est bien là le problème. Encore un plugin lourd pour effectuer une action simple. Le but ici est de mettre en place un système permettant de télécharger une image sur un serveur, en glissant une image simplement dans une « dropbox » présente sur une page web ; rien de plus.

Posons les bases

Je commence juste par créer la dropbox de base :

Avec son petit code css :

 

Jquery

Je commence par initialiser tous les évènements liés au drag et au drop, afin d’éviter la propagation des évènements.

 

 

Un peu de CSS est rajouté afin d’avoir une petite animation suivant les différents évènements.

Maintenant je m’occupe de l’événement drop, qui va lancer toutes les actions à faire au moment où on va lâcher notre image dans la dropbox.

 

 

La fonction principale pour l’upload de mon image, commence par effectuer un contrôle sur le type de fichier, puis nous utilisons FileReader, un objet d’une API disponible avec HTML5 : File. Cet objet va permettre de lire directement le fichier depuis le navigateur.

La chose importante à comprendre avec la lecture de fichier depuis le navigateur, c’est que le traitement est asynchrone. C’est normal, le temps que la lecture de l’image se fasse, le script continu de tourner.

Je vais donc ordonner l’exécution d’une nouvelle fonction (handleReaderLoad), lorsque l’image sera chargée (reader.onload).

 

 

La fonction handleReaderLoad va s’occuper d’uploader l’image sur le serveur dès que l’image est chargée dans le navigateur.

Rien de bien compliqué ici, c’est juste une requête Ajax avec l’image encodée en Base64.

 

 

Coté PHP

Pour PHP, comme souvent sur ce blog, j’utilise CodeIgniter. Donc voici le contrôleur qui gère le décodage de l’image et qui l’enregistre dans un dossier.

 

 

Voilà avec ce simple code, il est maintenant possible d’envoyer rapidement une image en drag and drop de votre site vers votre serveur, pour une photo de profil par exemple 😉

13 thoughts on “Simple upload en drag and drop avec HTML5 / Jquery / PHP

  1. Salut,

    Ca a l’air intéressante, as-tu une page d’exemple ?

  2. Merci beaucoup pour ce partage ! Implémentation très facile !
    Pour les + apprentis en php, un exmple « from scratch » aurait été préférable, mais c’est du détail, dans l’ensemble tout reste parfaitement compréhensible. Bonne continuation

  3. Merci pour avoir partagé ce code. Par contre, j’ai une question : dans le cas où je veux faire la même chose mais sans utiliser CodeIgniter, comment faire ? C’est une simple div et donc un $_FILES[‘image’] ne marcherait pas… Cette question est sûrement sans intérêt mais bon 🙂

    • Dans mon code PHP, la seule partie qui est liée à CodeIgniter c’est le « form_validation », le reste est du pur PHP. Tu récupères ici le contenu de ton fichier via une requête POST, qui a pour clé « file ».

  4. Simple et efficace, merci !

  5. Bonjour, moi j’ai un petit souci… Déjà je ne comprends pourquoi ta fonction « handleReaderLoad » prends un paramètre « evt » et lorsque tu l’appelle dans « upload » tu ne lui donne aucun « reader.onload = handleReaderLoad; »??

  6. do_something(data) n’est pas définit…pourquoi?

  7. Super cet article !
    C’est vrai qu’on trouve beaucoup de plugins pour l’upload, mais très peu d’exemples simples en JS.

  8. Bonjour,

    Merci pour cet article ! Comment faire par contre pour qu’il soit également possible de cliquer sur la zone afin d’avoir son explorateur et sélectionner l’image normalement ?

    Merci d’avance,

    Mathieu

  9. C’est génial! Et super simple…

    Merci bcp Maxime!!! Tu portes excellemment ton prénom! 😉

    Pour ceux que ça intéresse, le fichier de requête en PHP sans CodeIgniter donne ceci:

    Par contre j’ai une petite question:
    Je souhaiterais pouvoir renvoyer une image sur le DIV « dropfile » afin de remplacer l’image existante, que j’affiche dans le même DIV..

    Aurais-tu un conseil à me donner ?

    Merciiii!

  10. Mince, ce n’est pas passé avec les balises php, le revoici sans, si tu pouvais le coller…. Merci..

     » $file = $_POST[‘file’];

    $name = $_POST[‘nom_image’].’.jpg’;

    $encodedData = str_replace(‘ ‘,’+’,$file);
    $decodedData = base64_decode($encodedData);

    file_put_contents(‘images/affiches/’.$name, $decodedData) ;

    echo ‘ok’; »

Laisser un commentaire