Pliki przeciągnij i upuść HTML5 - prześlij po przesłaniu całego formularza

Question

Czy w formularzu można uwzględnić pliki "przeciągnij i upuść"? Istnieje wiele opcji przesyłania asynchronicznie.

Czy można przechwycić dane pliku i uwzględnić je w formularzu?

Używam Rails jak mój serwer tak idealnie dane dotyczące obrazu będzie pasował do postaci, jak następuje:

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

    </div> 

</form> 

Answer 1

znalazłem ten problem na nim: drag drop files into standard html file input

nie mam uwierz, że to możliwe, ale możesz osiągnąć efekt. Po przesłaniu formularza należy zapobiec jego domyślnemu zachowaniu i rozpocząć przesyłanie pliku za pomocą ajax. Po zakończeniu przesyłania pliku ponownie wskaż formularz i prześlij go, nie wyłączając jego domyślnego zachowania.

Coś jak:

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

a następnie 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 

}