Как отобразить и удалить загрузочный .gif при загрузке файла?

Question

У меня есть кнопка, при нажатии которой необходимо загрузить файл, отправив форму с помощью POST. [ Изменить, чтобы уточнить: Загружаемый файл динамически генерируется с помощью сценария PHP на основе значений в скрытой форме (которые я изменяю с помощью jQuery, в зависимости от нажатой кнопки). Данный файл является файлом Excel. Я бы предпочел не использовать GET, если это возможно, поскольку я не хочу, чтобы люди ссылались непосредственно на файл.]

Я не могу использовать $.post для отправки формы, потому что это не работает так, как мне бы хотелось. Хотя отправка происходит нормально, она не вызывает диалоговое окно загрузки в браузере. Насколько я понимаю, содержимое файла теперь существует в JavaScript, и нет способа (который я знаю), который позволил бы вам отправить его в браузер из JavaScript для загрузки. Таким образом, другие решения (например, Как использовать jQuery или Ajax для замены фонового изображения после отправки формы? ) не будут работать в этом конкретном случае.

Решение Я обнаружил , чтобы использовать $("#someform").submit(); для запуска скрытой формы при нажатии кнопки. Страница не перезагружается, и на экране появляется диалоговое окно сохранения.

Пример кода:

$( "#button" ).click(
    function() {
        $(this).removeClass( "button" );
        $(this).addClass( "loading" );
        $( "#form" ).submit();  
    }
);

Однако, так как генерация файла могла занять несколько секунд, я хотел показать пользователю анимацию загрузки. Теперь возникает проблема с отображением анимации, но я не могу удалить анимацию после отправки формы.

Если это невозможно сделать с помощью этого метода, может ли кто-нибудь предложить лучшее решение?

Answer 1

Я сделал это с 2 библиотеками по лицензии MIT: BinaryTransport и FileSaver .В этом примере я загружаю файл Excel, созданный на стороне сервера.

HTML (в теге head):

<script src="/E1/js/jquery.binarytransport.js" charset="UTF-8"></script>
<script src="/E1/js/FileSaver.js" charset="UTF-8"></script>

Javascript:

function ExportToExcel(urlExcel, fileName){
      $("body").css("cursor", "progress");
      $.ajax({
          url: urlExcel,
          type: "GET",
          dataType: 'binary',
          headers:{'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','X-Requested-With':'XMLHttpRequest'},
          processData: false,
          success: function(blob){
                $("body").css("cursor", "default");
                saveAs(blob, fileName);
          },
            error : function(result, status, error){
                $("body").css("cursor", "default");
          } 
        });  
}

Дляпользовательская анимация загрузки, просто назовите ее там, где я меняю тип курсора в следующих строках:

$("body").css("cursor", "progress");
$("body").css("cursor", "default");

Answer 2

Когда вы submit заполняете форму всей страницы, загружаемое изображение обязательно будет удалено, если вы не добавите его в другое место при загрузке страницы.

Answer 3

Я разместил ответ в на этот вопрос , который демонстрирует, как это сделать. См. Демонстрацию в http://tomsfreelance.com/stackoverflow/imageDownloadLoading/main.php и исходные файлы в http://tomsfreelance.com/stackoverflow/imageDownloadLoading/

Answer 4

Вы должны либо указать URL-адрес для файла .gif, либо передать его в кодировке Base64