html5 trascina e rilascia i file - carica quando viene inviato l'intero modulo

Question

È possibile includere i file "trascina e rilascia" in un invio di modulo? Ci sono molte opzioni per caricare in modo asincrono.

È possibile acquisire i dati del file e includerli in un campo modulo?

sto usando Rails come il mio server così idealmente i dati per l'immagine si adatterebbe a una forma come segue:

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

    </div> 

</form> 

Answer 1

ho trovato questo problema su di esso: drag drop files into standard html file input

non lo faccio credi sia possibile, ma potresti ottenere l'effetto. Quando invii il modulo, prevedi il suo comportamento predefinito e inizia a caricare il file con ajax. Quando il caricamento del file è completo, si ricollega al modulo e lo si inoltra, senza prevenirne il comportamento predefinito.

Qualcosa di simile:

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

E poi il 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 

}