html5 Drag & Drop-Dateien - Upload, wenn das gesamte Formular eingereicht wurde

Question

Ist es möglich, "drag and drop'd" -Dateien in eine Formularübertragung einzubinden? Es gibt viele Optionen zum asynchronen Hochladen.

Ist es möglich, die Dateidaten zu erfassen und in ein Formularfeld aufzunehmen?

Ich Rails wie mein Server so ideal die Daten für das Bild verwendet würde zu einer Form passen wie folgt:

<form multipart='multipart' > 
    <select name='files[type_id]'> 
    ... 
    ... 
    </select> 
    <!-- FILE DATA ? --> 
    <div id="file_drop_spot"> 

    </div> 

</form> 

Answer 1

ich dieses Problem auf sie gefunden: drag drop files into standard html file input

ich nicht glaube, es ist möglich, aber Sie könnten den Effekt erzielen. Wenn Sie das Formular absenden, verhindern Sie das Standardverhalten und starten Sie das Hochladen der Datei mit AJAX. Wenn der Datei-Upload abgeschlossen ist, zeigen Sie erneut auf das Formular und senden es, ohne das Standardverhalten zu verhindern.

Etwas wie:

<form id="form"> 
    <input type="text" name="someText"></input> 
    <input id="submitButton" type="submit" onclick="uploadFile()"></input> 
</form> 

Und dann das javascript:

function uploadFile() { 

    document.getElementById("submitButton").disabled = true; 
    // Some ajax code to upload the file and then on the success: 
    success: function() { 

     document.getElementById("form").submit(); 

    } 
    return false; // Prevent the form from submitting 

}