Ajax loader on file upload action

Question

Я хотел бы настроить какой-то ajax-загрузчик на действие, выполняющее загрузку файла. После того, как файл достаточно большой (Excel с более чем 2000 строк), требуется некоторое время для его обработки и его довольно неприятный для пользователя, подождите, не получая никакой обратной связи, чем отображаемый браузером.

Для меня идеальным решением было бы блокирование всплывающего окна, отображающее сообщение «Обработка файла ...» (или что-то в этом роде), чтобы пользователи не загружали еще один файл.

Answer 1

Ну ... У меня есть что-то вроде этого в месте на приложение Symfony, хотя это на самом деле не относится к Symfony:

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

Таким образом, в основном нажмите на кнопку загрузки добавляет класс в пустой DIV рядом с ним, который имеет анимированный GIF в качестве фонового изображения. В этом случае это типичный значок загрузки.

Это должно дать вам достаточно, чтобы создать всплывающее окно или настроить его в соответствии с вашими потребностями.