Chemin d'accès au fichier téléchargé à partir de HTML5 drag & amp; déposer dans le champ de saisie

Je travaille sur une application (dans Node.js, qui n'est pas pertinent pour ce cas) qui permet à l'utilisateur de charger une image. Il fonctionne très bien à l'aide d'un formulaire avec un input (type="file").

Cependant, ce que je veux, c'est être en mesure de télécharger une image à l'aide de glisser-déposer HTML5 à la place. Aussi loin que je viens il est possible de faire glisser une image vers le client, et la vignette de l'image s'affiche dans une div. Cependant j'ai vraiment besoin d'aide avec l'obtention de l'upload d'un fichier de travail.

Le truc c'est que je veux utiliser le formulaire que je suis en ce moment, et (en quelque sorte) passer le chemin d'accès du fichier dans le champ de saisie, c'est à dire le flux de travail exactement comme il le fais maintenant, mais au lieu de choisir un fichier en parcourant, je tiens à le joindre pour le champ de saisie par glisser-déposer.

Dans le code js ci-dessous pour faire glisser et déposer le fichier qui a été glissé vers le client est stocké dans la variable "fichier", et je suis capable d'utiliser "fichier.nom", "fichier.tapez" et "fichier.taille" exactement de la même manière car il fonctionne depuis l'avant avec la forme. Cependant, je ne peux pas accéder aux fichiers "chemin" (fichier.chemin de) ce qui rend impossible d'accéder au fichier côté serveur pour le téléchargement de la même manière que je le fais depuis avant de.

La question est, est-il possible de passer le fichier de l'objet dans le champ de saisie après que le fichier a été déplacée vers le client, de sorte que je peux cliquer sur "soumettre" et télécharger le fichier? Si oui, comment cela pourrait-il être fait?

Merci d'avance!

la dropbox, ainsi que la forme que j'utilise pour les uploads de fichier:

<div id='upload'>
    <article>
        <div id='holder'>
            <p id='status'>File API and FileReader API not supported</p>
        </div>
    </article> 

    <form method='post' enctype='multipart/form-data' action='/file-upload'>
        <p>
            <input type='file' name='thumbnail'>
        </p>
        <p>
            <input type='submit'>
        </p>
    </form>
</div>

le code pour faire glisser et déposer:

uploadImage: function(){
    var holder = document.getElementById('holder'),
        state = document.getElementById('status');

    if (typeof window.FileReader === 'undefined') {
      state.className = 'fail';
    } else {
      state.className = 'success';
      state.innerHTML = 'File API & FileReader available';
    }

    holder.ondragover = function () { this.className = 'hover'; return false; };

    holder.ondragend = function () { this.className = ''; return false; };

    holder.ondrop = function (e) {
      this.className = '';
      e.preventDefault();

      var file = e.dataTransfer.files[0],
          reader = new FileReader();

      reader.onload = function (event) {
        holder.style.background = 'url(' + event.target.result + ') no-repeat center';
      };

      reader.readAsDataURL(file);

      return false;
    };
},

source d'informationauteur holyredbeard | 2012-05-08