4

Добрый день. Ситуация такая: Есть сервер. На нем есть ссылка нажав на которую происходит генерация контента (перегоняется DJVU в TIFF) и выдается TIFF файл. Генерация происходит долго. До минуты (все это время в браузере пишется "Ожидание %host%"). Затем вылазит окошко "сохранить как" и готовый файл скачивается. Вопрос: можно ли как-то на время генерации (от клика до окна "сохранить как") выводит информационное сообщение (к примеру крутить ГИФку от начала, а по окну - убрать ее)? Хотелось бы, по возможности, через jQuery AJAX. Но создаю я AJAX запрос посылаю его, возвращается ответ, срабатывает success, но "сохранить как" не происходит. Можно ли как-то ему объяснить, что неплохо было бы сохранить все это? Надеюсь понятно объяснил. Спасибо за ответы и за участие.

UPD С сервера идет картинка TIFF. Но идет она через минуту. Эту минуту надо отловить. Если применить такой код

$.post(URL, PARAMS, function(data) { alert(data.length); });

То по запросу можно ГИФ включить, по success закрыть, но как заставить его пришедшую data сохранить в файл? Alert вываливается и все. Инфу надо как-то дальше сохранить. Если использовать старый способ отправки через FORM то происходит смена URL на файл и отловить появление "save as" не представляю как.

3
  • 1
    @QuitLN, Согласно правилам форума, вопросы не должны сводиться к решению либо завершению учебных заданий за учащихся. Пожалуйста, уточните, что вы сделали сами и что не получилось. Что конкретно с сервера ты забираешь-то? Парсишь готовую ссылку после ожидания или как?
    – Artem
    2 авг 2012 в 9:32
  • Что стоит со стороны сервера? PHP?
    – MuFF
    2 авг 2012 в 9:55
  • К сожалению нет. Самописный сервер. Но базовые возможности доступны.
    – QuitLN
    2 авг 2012 в 10:22

2 ответа 2

2

Может Вам подойдёт такое решение:

Вы со страницы вызываете ajax запрос на генерацию картинку, и в фоне ждете ответ, но в ответе вы отдаёте не саму картинку, а ссылку на неё, и в методе success прописываете location=data

$.ajax({url:"you url for generation"}).success(function(data){ location = data; });

Точнее наверное надо создать новое окно с этим локейшеном:

window.open(data,'','…');

Ну и соответственно всякие крутилки включаете и выключаете перед вызовом аякса и в суксессе.

Через фреймы всё прекрасно отлавливается:

можно посмотреть здесь

HTML

<button>test</button>
<div id="loader"></div>
<div class="iframe">
    <iframe></iframe>
</div>

JS

$(document).ready(
    function(){
        $("button").click(function(){
            $("#loader").text("Loading...");
            $("iframe").ready(function(){$("#loader").text("Loading... started...");});    
            $("iframe").load(function(){$("#loader").text("Loaded!");});
            $("iframe").attr("src","http://jfarcand.files.wordpress.com/2012/05/untitled.jpg");
        });
}
);​
6
  • 1
    Да, метод рассматривался. Но проблема в том, что картинка не хранится физически негде. Она генерируется и сразу выдается в поток. Промежуточного хранения хотелось бы избежать (придется много переписывать) :(
    – QuitLN
    2 авг 2012 в 10:43
  • Вам решать, но это плохое решение в принципе - минутное ожидание ответа от сервера может рубиться клиентской стороной как таймаут в зависимости от настроек сети/браузера/прокси/провайдера и т.д. Попробуйте тогда реализовать через фреймы?
    – Чад
    2 авг 2012 в 10:49
  • 1
    Через фреймы беда в том, что не получается отловить момент начала скачки файла =( onload не собирается работать =\
    – QuitLN
    2 авг 2012 в 11:00
  • Смотрите обновление ответа.
    – Чад
    2 авг 2012 в 11:26
  • 1
    Метод отличный. Но как я понял работает только для inline документов. Если подставить ему .exe файлик: уже в "Loaded!" не встает. Мои TIFF-ки как раз так и выгружаются. Видимо простого решения нету. Спасибо за помощь !
    – QuitLN
    2 авг 2012 в 12:01
0

Как скачать файл после получения его по ajax

Удобно когда файл долго создаётся и нужно показать preloader

Пример при отправке веб-формы:

<script>
$(function () {
    $('form').submit(function () {
        $('#loader').show();
        $.ajax({
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: 'binary',
            xhrFields: {
                'responseType': 'blob'
            },
            success: function(data, status, xhr) {
                $('#loader').hide();
                // if(data.type.indexOf('text/html') != -1){//Если вместо файла получили страницу с ошибкой
                //     var reader = new FileReader();
                //     reader.readAsText(data);
                //     reader.onload = function() {alert(reader.result);};
                //     return;
                // }
                var link = document.createElement('a'),
                    filename = 'file.xlsx';
                // if(xhr.getResponseHeader('Content-Disposition')){//имя файла
                //     filename = xhr.getResponseHeader('Content-Disposition');
                //     filename=filename.match(/filename="(.*?)"/)[1];
                //     filename=decodeURIComponent(escape(filename));
                // }
                link.href = URL.createObjectURL(data);
                link.download = filename;
                link.click();
            }
        });
        return false;
    });
});
</script>

Не обязательный функционал закомментирован для упрощения примера.

Не требуется создавать временные файлы на сервере.

На jQuery v2.2.4 всё работает. На старой версии будет ошибка:

Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'blob').

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.