Ajout fonction Parcourir sur clic tuto Drag & Drog

Clemus
Javascript

Bonjour à tous,

Le tuto Drag & Drop permet d'uploader des fichiers par simple glisser/déposer, j'aimerai ajouter la possibilité de choisir son fichier dans l'explorateur (à l'ancienne quoi) en cliquant sur la div où on dépose normalement les fichiers, histoire d'avoir la possibilité de choisir le comportement.

Est-ce possible? Le cas échéant, comment?

Merci d'avance.

8 réponses

Thebrer
Réponse acceptée

Oui tu vas devoir développer un système quasiment similaire au drag and drop avec des FileReader. Concrétement quelque chose qui ressemble à ceci :

<input type="file" id="input" style="display: none" />
var input = document.querySelector("#input");

input.onchange = function()
{
    var file = this.files[0];
    var name = file.name;
    var reader = new FileReader();

    reader.onload = function()
    {
        // Maintenant reader.result contiendra l'image en data uri. T'as plus qu'à l'envoyer en ajax :)
    }

    reader.readAsDataUri(file);
}
Clemus
Auteur
Réponse acceptée

En fait j'ai simplement rajouté quelques lignes dans dropfile.js :

Dans this.each(function(){ ... });

    $(this).append('<input type="file" class="input-dropfile" style="display: none">');
    var input_dropfile = $(this).find(".input-dropfile");

    input_dropfile.bind({
      change : function(e){
        e.preventDefault();
        var files = this.files
        if($(this).parent().data('value')){
          replace = true; 
        };
        upload(files,$(this).parent(),0);
      }
    });

    this.addEventListener('click', function(e){
      input_dropfile.click();
    }, false);
tekyo11

Salut,
Il est tout a fait possible de faire un Drag & Drop pour l'upload, ça s'appelle une dropzone.
Il existe quelques exemples de script sur internet :
Drag ‘n’ Drop Upload Super Facile – Dropzone.js/
Simple upload en drag and drop avec HTML5 / Jquery / PHP/

Clemus
Auteur

Bonjour, merci de la réponse.
Cependant ce n'est pas ce que je veux, mon système drag and drop (d'après le tuto grafikart sur le sujet) est déjà en place mais j'aimerai ajouter la possibilté de choisir une image dans l'explorateur ouvrable par simple clic sur la dropzone histoire que l'internaute puisse choisir le comportement. Pour être plus clair j'aimerai que la dropzone se comprte également comme un bouton "parcourir" à l'image de l'upload d'image sur google+.

Thebrer

Oui c'est tout à fait possible.

Tu peux rajouter un input de type file dans ton code html :

<input type="file" id="input" style="display: none" />

Ensutie quand on clique sur ta zone de drop, tu peux faire un petit :

document.querySelector("#input").click();

Qui aura pour effet d'ouvrir l'explorateur de fichiers.
Tendresse et chocolat.

Clemus
Auteur

ok, mais quand je choisirai le fichier je veux que la drop zone se comporte comme si j'avais glissé un fichier (à sa voir upload ajax et compagnie...), hors là ce ne sera pas le cas. Je parle de tout ça par rapport au tuto Upload Drag & drop de ce site bien sûr, soyons clairs.

Clemus
Auteur

ok.
Je vais essayer avec ça.
Merci beaucoup.

Thebrer

D'une manière générale tu me parles de deux API différentes : l'API drag'n'drop et l'API file (que je t'ai présenté). Il est donc normal que tu aies deux codes différents pour deux choses qui peuvent pariâtre au premier abord assez proches. Je sais que cela peut paraître redondant et c'est là l'intêret d'utiliser des outils déja préconcus pour se faciliter la vie avec ce genre de choses (genre plupload).