Ajax loader für Datei-Upload-Aktion

Question

Ich möchte eine Art von AJAX-Ladeprogramm für eine Aktion konfigurieren, die einen Datei-Upload ausführt. Sobald die Datei ziemlich groß ist (Excel mit mehr als 2000 Zeilen), dauert es einige Zeit, um verarbeitet zu werden und es ist ziemlich unangenehm für den Benutzer, mit keiner anderen Rückmeldung zu warten, als die vom Browser angezeigte.

Für mich wäre die ideale Lösung ein blockierendes Popup mit der Meldung "Die Datei wird verarbeitet ..." (oder ähnlichem), um zu verhindern, dass Benutzer in der Zwischenzeit eine andere Datei hochladen.

Answer 1

Nun ... Ich habe so etwas wie dies an Ort und Stelle auf einem Symfony App bekam, obwohl dies nicht wirklich auf Symfony beziehen:

TEMPLATE:

<input type="submit" class="jq-upload" value="Upload" /> // submit button 
<div class="jq-loader"></div> // empty div for a loader image 

JS:

$(document).ready(function() 
{ 
    $(".jq-upload").click(function() { 
    $(".jq-loader").addClass("jq-load-icon"); 
    }); 
}); 

CSS:

.jq-load-icon {width: 16px; height: 16px; background: url('../images/loader.gif') no-repeat;} 

Also, im Grunde der Klick auf Upload-Button fügt eine Klasse in das leere div neben ihm, die ein animiertes Gif als Hintergrundbild hat. In diesem Fall ist es ein typisches Ladesymbol.

Das sollte Ihnen genug geben, um ein Popup zu erstellen oder es an Ihre Bedürfnisse anzupassen.