Отображать значок загрузки во время загрузки файла

Question

Я пытаюсь показать какой-то значок загрузки, когда пользователь загружает файл. Я использую загрузку файлов базового типа.

Вот мой контрольный код, который я использую:

VIEW:

  <input type="file" onchange="form.submit()" class="multiple" name="files" id="fileUploadBox"  value="Upload Files"multiple />

У меня есть метод в контроллере, которыйпринимает файл и сохраняет в нашей базе данных.

Вы можете видеть, что в моем коде у меня есть onchange = "form.submit", который отправляет форму после того, как пользователь выбирает файл. Я предпочел этот способ вместо того, чтобы пользователю приходилось нажимать другую кнопку после выбора файла для отправки формы.

Моя проблема заключается в том, что когда пользователь выбирает файл большего размера, страница на некоторое время остается во время загрузки и выгрузкифайл, а затем отправляет форму через 20-30 секунд.

Мне нужно добавить некоторый код, который показывает некоторый тип значка загрузки / вращения, пока файл загружается и форма повторно отправляется.

Я полагаю, что большинствозагрузка происходит при загрузке файла, а не при отправке формы.

Любая помощь приветствуется.

Answer 1

Существует ряд опций и библиотек, которые вы можете использовать. Если вы используете JQuery, вы можете использовать что-то вроде JQuery Loading Overlay работает хорошо. Там также есть хорошая документация.

Вы просто изменили бы свой вызов onchange на что-то вроде

onchange="submitForm();"

и получили бы функцию javascript, например, такую:

function submitForm(){
    $("#spinner").LoadingOverlay("show");
    $("#form").submit();
}

Есть тонны разных блесен, и вам не нужно использовать JQuery. Но идея была бы такой же.

Answer 2

Если вы используете Bootstrap, я обнаружил, что вы можете поместить текст и спиннер. Посмотри на это

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>

Answer 3

Я рекомендую использовать Bootstrap для этого. Если вы используете его, вы должны использовать этот код

var $btn = $(this);
 $btn.button('loading');
 // simulating a timeout
 setTimeout(function () {
   $btn.button('reset');
 }, 1000);