Pfad zur hochgeladenen Datei aus HTML5 per Drag & Drop in das Eingabefeld

Question

Ich arbeite an einer Anwendung (in Node.js, die für diesen Fall irrelevant ist), die es dem Benutzer ermöglicht, ein Bild hochzuladen. Es funktioniert gut mit einem Formular mit einem Eingabefeld (Typ = "Datei").

Allerdings möchte ich ein Bild mit HTML5 per Drag & Drop hochladen können. Soweit ich gekommen bin, ist es möglich, ein Bild auf den Client zu ziehen, und die Bildminiatur wird in einem div angezeigt. Allerdings brauche ich wirklich Hilfe beim Hochladen der Datei.

Die Sache ist, dass ich das Formular verwenden möchte, das ich gerade benutze, und (irgendwie) den Pfad der Datei zum Eingabefeld übergebe, dh der Ablauf funktioniert genau so wie jetzt, aber anstatt zu wählen eine Datei durch Durchsuchen Ich möchte es per Drag & Drop an das Eingabefeld anhängen.

In dem js-Code unten für Drag & Drop wird die Datei, die auf den Client gezogen wurde, in der Variablen "file" gespeichert, und ich kann "file.name", "file.type" und " file.size "genau so, wie es seither mit dem Formular funktioniert. Ich kann jedoch nicht auf die Dateien "path" (file.path) zugreifen, was es unmöglich macht, auf die Dateiserver-Seite zuzugreifen, um auf die gleiche Weise wie zuvor hochgeladen zu werden.

Die Frage ist, ist es möglich, das Dateiobjekt an das Eingabefeld übergeben, nachdem die Datei auf den Client gezogen wurde, so dass ich auf "Senden" klicken und die Datei hochladen kann? Wenn ja, wie könnte dies geschehen?

Vielen Dank im Voraus!

die Dropbox sowie die Form i für Uploads Datei bin:

<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> 

der Code für Drag & Drop:

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; 
    }; 
}, 

Answer 1

Sie können die Dateieingabe nicht verwenden, um die Dateidaten hinzuzufügen. Was Sie jedoch tun können (neben anderen Techniken), ist die Verwendung der Base64 (nativ durch das Ereignis reader.onload als event.target.result, wenn readAsDataURL Methode verwendet) kodierte Daten und legte sie in eine versteckte Feld:

html

<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'> 
     <input type='file' name='thumbnail' /> 
     <input type='hidden' name='base64data' /> 
     <input type='submit' formenctype='application/x-www-form-urlencoded' /> 
</form> 

js

reader = new FileReader(); 
reader.onload = function (event) { 
    document.getElementById('base64data').setAttribute('value', event.target.result); 
}; 
reader.readAsDataURL(file); 

Von der Server-Seite Sie werden in der Lage sein, die base64 zu bekommen en codierte Daten aus der Datei, entschlüsseln Sie sie einfach und verwenden Sie sie wie Sie wollen.

Während das Formular abschicken, können Sie auch das „enctype“ Attribut ändern (durch das formenctype Attribut getan) und die einfache HTML-Datei-Eingabe entfernen, da die Datenposten in einem Textfeld sein wird.

Answer 2

Es ist unmöglich, den Weg des Feldes zu wissen für Sicherheitszwecke. Per Drag & Drop muss der Upload unabhängig vom Hauptformular erfolgen. Sehen Sie hier ein Beispiel: http://www.sitepoint.com/html5-file-drag-and-drop/