Определить, когда браузер получает файл загрузки

У меня есть страница, которая позволяет пользователю загружать динамически генерируемый файл. Генерирование занимает много времени, поэтому я хотел бы показать "ожидание" индикатор. Проблема в том, что я не могу понять, как определить, когда браузер получил файл, поэтому я могу скрыть индикатор.

Я делаю запрос в скрытой форме, которая отправляет на сервер и нацеливает скрытый iframe для его результатов. Поэтому я не заменяю все окно браузера результатом. Я слушаю "загрузить" событие в iframe, в надежде, что оно сработает после завершения загрузки.

Я возвращаю & quot; Content-Disposition: attachment & quot; заголовок с файлом, который заставляет браузер показывать & quot; Сохранить & quot; Диалог. Но браузер не запускает «загрузить» событие в iframe.

Один из подходов, которые я попробовал, - это использование ответа из нескольких частей Таким образом, он отправит пустой HTML-файл, а также прикрепленный загружаемый файл. Например:

Content-type: multipart/x-mixed-replace;boundary="abcde"

--abcde
Content-type: text/html

--abcde
Content-type: application/vnd.fdf
Content-Disposition: attachment; filename=foo.fdf

file-content
--abcde

Это работает в Firefox; он получает пустой HTML-файл, запускает «загрузить» событие, а затем показывает & quot; Сохранить & quot; диалог для загружаемого файла. Но это не сработает в IE и Safari; IE запускает «загрузить» событие, но не загружает файл, и Safari загружает файл (с неверным именем и типом содержимого) и не запускает «загрузить» событие.

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

У кого-нибудь есть идея получше?

 dudeNumber423 янв. 2015 г., 00:01
Единственным надежным способом, по-видимому, является push-уведомление сервера (SignalR для людей ASP.NET).
 Mateen13 мар. 2015 г., 08:02
bennadel.com/blog/…    - это простое решение
 Fai Zal Dong27 дек. 2016 г., 06:10
@Mateen спасибо, чувак! это действительно просто
 JW.10 июл. 2009 г., 00:02
Спасибо, Эрик, это хорошо знать. Я больше не буду тратить время на такой подход.
 EricLaw09 июл. 2009 г., 23:40
Ни одна версия IE не поддерживает multipart / x-mixed-replace.

Ответы на вопрос(17)

вы можете открыть свой файл в новом окне и проверить, заполняются ли элементы eny в этом теле окна с интервалом.

var form = document.getElementById("frmDownlaod");
 form.setAttribute("action","downoad/url");
 form.setAttribute("target","downlaod");
 var exportwindow = window.open("", "downlaod", "width=800,height=600,resizable=yes");
 form.submit();

var responseInterval = setInterval(function(){
	var winBody = exportwindow.document.body
	if(winBody.hasChildNodes()) // or 'downoad/url' === exportwindow.document.location.href
	{
		clearInterval(responseInterval);
		// do your work
		// if there is error page configured your application for failed requests, check for those dom elemets 
	}
}, 1000)
//Better if you specify maximun no of intervals

если вы хотите отображать только сообщение или gif-загрузчик до тех пор, пока не отобразится диалоговое окно загрузки, - это поместить сообщение в скрытый контейнер, и когда вы нажимаете кнопку, генерирующую файл для загрузки, вы делаете контейнер видимым. Затем используйте jquery или javascript, чтобы перехватить событие focusout кнопки, чтобы скрыть контейнер, содержащий сообщение.

элементов нажмите с определеннымdownload класс, который позволяет показывать пользовательское сообщение на экране. Я использовалfocus Триггер, чтобы скрыть сообщение.

JavaScript

$(function(){$('.download').click(function() { ShowDownloadMessage(); }); })

function ShowDownloadMessage()
{
     $('#message-text').text('your report is creating, please wait...');
     $('#message').show();
     window.addEventListener('focus', HideDownloadMessage, false);
}

function HideDownloadMessage(){
    window.removeEventListener('focus', HideDownloadMessage, false);                   
    $('#message').hide();
}

HTML

<div id="message" style="display: none">
    <div id="message-screen-mask" class="ui-widget-overlay ui-front"></div>
    <div id="message-text" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable waitmessage">please wait...</div>
</div>

Теперь вы должны реализовать любой элемент для загрузки:

<a class="download" href="file://www.ocelot.com.pl/prepare-report">Download report</a>

или же

<input class="download" type="submit" value="Download" name="actionType">

После каждогоdownload нажмите вы увидите сообщениеyour report is creating, please wait...

 30 янв. 2015 г., 00:36
Что если пользователь щелкнет окно?

но я поставлю это здесь, если кто-то еще захочет узнать мое решение:

У меня была настоящая борьба с этой точной проблемой, но я нашел жизнеспособное решение, используя iframes (я знаю, я знаю. Это ужасно, но это работает для простой проблемы, которая у меня была)

У меня была HTML-страница, которая запустила отдельный скрипт php, который сгенерировал файл, а затем загрузил его. На html-странице я использовал следующий jquery в html-заголовке (вам также необходимо включить библиотеку jquery):

<script>
    $(function(){
        var iframe = $("<iframe>", {name: 'iframe', id: 'iframe',}).appendTo("body").hide();
        $('#click').on('click', function(){
            $('#iframe').attr('src', 'your_download_script.php');
        });
        $('iframe').load(function(){
            $('#iframe').attr('src', 'your_download_script.php?download=yes'); <!--on first iframe load, run script again but download file instead-->
            $('#iframe').unbind(); <!--unbinds the iframe. Helps prevent against infinite recursion if the script returns valid html (such as echoing out exceptions) -->
        });
    });
</script>

На your_download_script.php имейте следующее:

function downloadFile($file_path) {
    if (file_exists($file_path)) {
        header('Content-Description: File Transfer');
        header('Content-Type: text/csv');
        header('Content-Disposition: attachment; filename=' . basename($file_path));
        header('Expires: 0');
        header('Cache-Control: must-revalidate');
        header('Pragma: public');
        header('Content-Length: ' . filesize($file_path));
        ob_clean();
        flush();
        readfile($file_path);
        exit();
    }
}


$_SESSION['your_file'] = path_to_file; //this is just how I chose to store the filepath

if (isset($_REQUEST['download']) && $_REQUEST['download'] == 'yes') {
    downloadFile($_SESSION['your_file']);
} else {
    *execute logic to create the file*
}

Чтобы разобраться в этом, jquery сначала запускает ваш php-скрипт в iframe. Iframe загружается после создания файла. Затем jquery снова запускает скрипт с переменной запроса, сообщающей скрипту о загрузке файла.

Причина, по которой вы не можете одновременно выполнять загрузку и генерацию файлов, связана с функцией php header (). Если вы используете header (), вы изменяете скрипт на что-то иное, чем веб-страница, и jquery никогда не распознает скрипт загрузки как «загруженный». Я знаю, что это не обязательно обнаруживает, когда браузер получает файл, но ваша проблема звучит похоже на мою.

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

Библиотека обмена сообщениями между серверами, которую я люблю и рекомендую, - Socket.io (через Node.js). После того, как ваш серверный скрипт завершит генерацию файла, который передается для загрузки, ваша последняя строка в этом скрипте может отправить сообщение в Socket.io, которое отправит уведомление клиенту. На клиенте Socket.io прослушивает входящие сообщения, отправленные с сервера, и позволяет вам действовать с ними. Преимущество использования этого метода перед другими заключается в том, что вы можете обнаружить & quot; true & quot; Завершить событие после завершения потоковой передачи.

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

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

Socket.io невероятно прост в установке и использовании. Узнать больше:http://socket.io/

"How to detect when browser receives file download?"

распорки 1.2.9
JQuery-1.3.2.
JQuery-щ-1.7.1.custom
IE 11
Ява 5


Мое решение с cookie:
- Client side:
При отправке формы вызовите функцию javascript, чтобы скрыть страницу и загрузить ожидающий счетчик.

function loadWaitingSpinner(){
... hide your page and show your spinner ...
}

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

function checkCookie(){
    var verif = setInterval(isWaitingCookie,500,verif);
}

Если cookie-файл найден, прекратите проверку каждые 500 мс, прекратите использование cookie-файла и вызовите свою функцию, чтобы вернуться на свою страницу и удалить ожидающий счетчик (removeWaitingSpinner()). Важно, чтобы срок действия файла cookie истек, если вы хотите снова загрузить другой файл!

function isWaitingCookie(verif){
    var loadState = getCookie("waitingCookie");
    if (loadState == "done"){
        clearInterval(verif);
        document.cookie = "attenteCookie=done; expires=Tue, 31 Dec 1985 21:00:00 UTC;";
        removeWaitingSpinner();
    }
}
    function getCookie(cookieName){
        var name = cookieName + "=";
        var cookies = document.cookie
        var cs = cookies.split(';');
        for (var i = 0; i < cs.length; i++){
            var c = cs[i];
            while(c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0){
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }
function removeWaitingSpinner(){
... come back to your page and remove your spinner ...
}

- Server side:
В конце вашего серверного процесса, добавьте куки в ответ. Этот файл cookie будет отправлен клиенту, когда ваш файл будет готов к загрузке.

Cookie waitCookie = new Cookie("waitingCookie", "done");
response.addCookie(waitCookie);

Я надеюсь помочь кому-то!

бъекта после загрузки. это работает в Chrome и Firefox!

function download(blob){
    var url = URL.createObjectURL(blob);
    console.log('create ' + url);

    window.addEventListener('focus', window_focus, false);
    function window_focus(){
        window.removeEventListener('focus', window_focus, false);                   
        URL.revokeObjectURL(url);
        console.log('revoke ' + url);
    }
    location.href = url;
}

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

 09 июн. 2015 г., 03:34
Браузеры, такие как Chrome, которые загружаются в нижний лоток, никогда не размывают и не перефокусируют окно.
 22 янв. 2015 г., 23:59
По-прежнему существует проблема переключения окна и возврата, что приведет к скрытию модального окна.

ременные файлы, так как я уже генерировал кучу временных файлов. Форма представляется вместе с:

var microBox = {
    show : function(content) {
        $(document.body).append('<div id="microBox_overlay"></div><div id="microBox_window"><div id="microBox_frame"><div id="microBox">' +
        content + '</div></div></div>');
        return $('#microBox_overlay');
    },

    close : function() {
        $('#microBox_overlay').remove();
        $('#microBox_window').remove();
    }
};

$.fn.bgForm = function(content, callback) {
    // Create an iframe as target of form submit
    var id = 'bgForm' + (new Date().getTime());
    var $iframe = $('<iframe id="' + id + '" name="' + id + '" style="display: none;" src="about:blank"></iframe>')
        .appendTo(document.body);
    var $form = this;
    // Submittal to an iframe target prevents page refresh
    $form.attr('target', id);
    // The first load event is called when about:blank is loaded
    $iframe.one('load', function() {
        // Attach listener to load events that occur after successful form submittal
        $iframe.load(function() {
            microBox.close();
            if (typeof(callback) == 'function') {
                var iframe = $iframe[0];
                var doc = iframe.contentWindow.document;
                var data = doc.body.innerHTML;
                callback(data);
            }
        });
    });

    this.submit(function() {
        microBox.show(content);
    });

    return this;
};

$('#myForm').bgForm('Please wait...');

В конце сценария, который генерирует файл, который я имею:

header('Refresh: 0;url=fetch.php?token=' . $token);
echo '<html></html>';

Это вызовет событие загрузки в iframe. Затем сообщение ожидания закрывается и начинается загрузка файла. Протестировано на IE7 и Firefox.

который сохранен, а не находится в документе, невозможно определить, когда загрузка завершена, поскольку он не входит в объем текущего документа, а представляет собой отдельный процесс в браузер.

 JW.09 июл. 2009 г., 22:55
Я должен уточнить - я не слишком обеспокоен, когда загрузкаcompletes, Если бы я мог просто определить, когда начинается загрузка, этого будет достаточно.

                  $('<iframe />')
                 .attr('src', url)
                 .attr('id','iframe_download_report')
                 .hide()
                 .appendTo('body'); 

Создайте iframe с задержкой и удалите его после загрузки.

                            var triggerDelay =   100;
                            var cleaningDelay =  20000;
                            var that = this;
                            setTimeout(function() {
                                var frame = $('<iframe style="width:1px; height:1px;" class="multi-download-frame"></iframe>');
                                frame.attr('src', url+"?"+ "Content-Disposition: attachment ; filename="+that.model.get('fileName'));
                                $(ev.target).after(frame);
                                setTimeout(function() {
                                    frame.remove();
                                }, cleaningDelay);
                            }, triggerDelay);
 30 янв. 2015 г., 00:38
В ней отсутствует информация, и она не решает, когда скрывать загрузку. вопрос.

хотите ли вы сохранить статус, например, файл в процессе, файл завершен? Ваше & quot; ожидание & quot; Страница может опросить сервер, чтобы узнать, когда генерация файла завершена. Вы наверняка не знаете, что браузер начал загрузку, но у вас есть уверенность.

Решение Вопроса

возможное решение использует JavaScript на клиенте.

Клиентский алгоритм:

Generate a random unique token. Submit the download request, and include the token in a GET/POST field. Show the "waiting" indicator. Start a timer, and every second or so, look for a cookie named "fileDownloadToken" (or whatever you decide). If the cookie exists, and its value matches the token, hide the "waiting" indicator.

Алгоритм сервера:

Look for the GET/POST field in the request. If it has a non-empty value, drop a cookie (e.g. "fileDownloadToken"), and set its value to the token's value.

Исходный код клиента (JavaScript):

function getCookie( name ) {
  var parts = document.cookie.split(name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}

function expireCookie( cName ) {
    document.cookie = 
        encodeURIComponent(cName) + "=deleted; expires=" + new Date( 0 ).toUTCString();
}

function setCursor( docStyle, buttonStyle ) {
    document.getElementById( "doc" ).style.cursor = docStyle;
    document.getElementById( "button-id" ).style.cursor = buttonStyle;
}

function setFormToken() {
    var downloadToken = new Date().getTime();
    document.getElementById( "downloadToken" ).value = downloadToken;
    return downloadToken;
}

var downloadTimer;
var attempts = 30;

// Prevents double-submits by waiting for a cookie from the server.
function blockResubmit() {
    var downloadToken = setFormToken();
    setCursor( "wait", "wait" );

    downloadTimer = window.setInterval( function() {
        var token = getCookie( "downloadToken" );

        if( (token == downloadToken) || (attempts == 0) ) {
            unblockSubmit();
        }

        attempts--;
    }, 1000 );
}

function unblockSubmit() {
  setCursor( "auto", "pointer" );
  window.clearInterval( downloadTimer );
  expireCookie( "downloadToken" );
  attempts = 30;
}

Пример кода сервера (PHP):

$TOKEN = "downloadToken";

// Sets a cookie so that when the download begins the browser can
// unblock the submit button (thus helping to prevent multiple clicks).
// The false parameter allows the cookie to be exposed to JavaScript.
$this->setCookieToken( $TOKEN, $_GET[ $TOKEN ], false );

$result = $this->sendFile();

Куда:

public function setCookieToken(
    $cookieName, $cookieValue, $httpOnly = true, $secure = false ) {

    // See: http://stackoverflow.com/a/1459794/59087
    // See: http://shiflett.org/blog/2006/mar/server-name-versus-http-host
    // See: http://stackoverflow.com/a/3290474/59087
    setcookie(
        $cookieName,
        $cookieValue,
        2147483647,            // expires January 1, 2038
        "/",                   // your path
        $_SERVER["HTTP_HOST"], // your domain
        $secure,               // Use true over HTTPS
        $httpOnly              // Set true for $AUTH_COOKIE_NAME
    );
}
 29 июн. 2016 г., 13:59
Как уже отмечали другие, это решение решает только часть проблемы, ожидая, пока сервер подготовит время файла. Другая часть проблемы, которая может быть значительной в зависимости от размера файла и скорости соединения, заключается в том, сколько времени требуется, чтобы фактически получить весь файл на клиенте. И это не решается с этим решением.
 12 февр. 2015 г., 09:37
Блестящий - через 100 лет мне бы не пришло в голову, что вы можете включить куки в загрузку файла. Спасибо!!
 03 апр. 2014 г., 21:10
Внимание к другим: если document.cookies не включает downloadToken, проверьте путь к cookie. В моем случае мне нужно было указать путь к & quot; / & quot; на стороне сервера (например, cookie.setPath (& quot; / & quot;) в Java), хотя путь по умолчанию был пустым. Некоторое время я думал, что проблема была в особом «localhost». обработка файлов cookie домена (stackoverflow.com/questions/1134290/…) но это не было проблемой в конце. Может быть, что для других, хотя так стоит прочитать.
 09 июл. 2014 г., 06:58
@bulltorious прежде чем углубляться в ваше решение, я хотел бы знать, будет ли оно работать с запросом на загрузку междоменного файла. Как вы думаете, это будет, или ограничения куки-файлов скомпрометируют это?
 29 янв. 2012 г., 01:53
Отличная идея, я использовал ее в качестве основыfor this answer о загрузке нескольких файлов с помощью jQuery / C #

но те, которые приводятся здесь Google, могут быть заинтересованы в моем решении. это очень просто, но надежно. и это позволяет отображать сообщения о реальном прогрессе (и может быть легко подключен к существующим процессам):

сценарий, который обрабатывает (моя проблема заключалась в том, чтобы: извлекать файлы через http и доставлять их в формате zip) записывает состояние в сеанс.

статус опрашивается и отображается каждую секунду. вот и все (хорошо, это не так. вам нужно позаботиться о многих деталях [например, одновременных загрузках], но это хорошее место для начала ;-)).

страница загрузки:

    <a href="download.php?id=1" class="download">DOWNLOAD 1</a>
    <a href="download.php?id=2" class="download">DOWNLOAD 2</a>
    ...
    <div id="wait">
    Please wait...
    <div id="statusmessage"></div>
    </div>
    <script>
//this is jquery
    $('a.download').each(function()
       {
        $(this).click(
             function(){
               $('#statusmessage').html('prepare loading...');
               $('#wait').show();
               setTimeout('getstatus()', 1000);
             }
          );
        });
    });
    function getstatus(){
      $.ajax({
          url: "/getstatus.php",
          type: "POST",
          dataType: 'json',
          success: function(data) {
            $('#statusmessage').html(data.message);
            if(data.status=="pending")
              setTimeout('getstatus()', 1000);
            else
              $('#wait').hide();
          }
      });
    }
    </script>

getstatus.php

<?php
session_start();
echo json_encode($_SESSION['downloadstatus']);
?>

download.php

    <?php
    session_start();
    $processing=true;
    while($processing){
      $_SESSION['downloadstatus']=array("status"=>"pending","message"=>"Processing".$someinfo);
      session_write_close();
      $processing=do_what_has_2Bdone();
      session_start();
    }
      $_SESSION['downloadstatus']=array("status"=>"finished","message"=>"Done");
//and spit the generated file to the browser
    ?>
 16 нояб. 2015 г., 23:26
вам не нужно использовать.each() для регистрации событий. просто скажи$('a.download').click()
 18 июл. 2011 г., 16:30
но если у пользователя есть несколько окон или загрузки открыты? также вы получаете здесь избыточный вызов на сервер
 18 дек. 2014 г., 13:29
Если у вас есть несколько подключений от одного пользователя, все они будут ожидать завершения других подключений, потому что session_start () блокирует сеанс для пользователя и препятствует доступу к нему всех других процессов.

ожидание & # x2019; индикатор, пока файл генерируется, а затем возвращается к нормальному состоянию после загрузки файла. Мне нравится делать это, используя скрытый iFrame и перехватывая событие onload фрейма, чтобы сообщить моей странице, когда начинается загрузка.BUT onload не запускается в IE для загрузки файлов (как с токеном заголовка вложения). Опрос сервера работает, но мне не нравится дополнительная сложность. Итак, вот что я делаю:

Target the hidden iFrame as usual. Generate the content. Cache it with an absolute timeout in 2 minutes. Send a javascript redirect back to the calling client, essentially calling the generator page a second time. NOTE: this will cause the onload event to fire in IE because it's acting like a regular page. Remove the content from the cache and send it to the client.

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

Вот как выглядит код, и это все, что вам действительно нужно.

public partial class Download : System.Web.UI.Page
{
    protected System.Web.UI.HtmlControls.HtmlControl Body;

    protected void Page_Load( object sender, EventArgs e )
    {
        byte[ ] data;
        string reportKey = Session.SessionID + "_Report";

        // Check is this page request to generate the content
        //    or return the content (data query string defined)
        if ( Request.QueryString[ "data" ] != null )
        {
            // Get the data and remove the cache
            data = Cache[ reportKey ] as byte[ ];
            Cache.Remove( reportKey );

            if ( data == null )                    
                // send the user some information
                Response.Write( "Javascript to tell user there was a problem." );                    
            else
            {
                Response.CacheControl = "no-cache";
                Response.AppendHeader( "Pragma", "no-cache" );
                Response.Buffer = true;

                Response.AppendHeader( "content-disposition", "attachment; filename=Report.pdf" );
                Response.AppendHeader( "content-size", data.Length.ToString( ) );
                Response.BinaryWrite( data );
            }
            Response.End();                
        }
        else
        {
            // Generate the data here. I am loading a file just for an example
            using ( System.IO.FileStream stream = new System.IO.FileStream( @"C:\1.pdf", System.IO.FileMode.Open ) )
                using ( System.IO.BinaryReader reader = new System.IO.BinaryReader( stream ) )
                {
                    data = new byte[ reader.BaseStream.Length ];
                    reader.Read( data, 0, data.Length );
                }

            // Store the content for retrieval              
            Cache.Insert( reportKey, data, null, DateTime.Now.AddMinutes( 5 ), TimeSpan.Zero );

            // This is the key bit that tells the frame to reload this page 
            //   and start downloading the content. NOTE: Url has a query string 
            //   value, so that the content isn't generated again.
            Body.Attributes.Add("onload", "window.location = 'binary.aspx?data=t'");
        }
    }

window.onblur() событие, чтобы закрыть диалог загрузки. Конечно, если это займет слишком много времени и пользователь решит заняться чем-то другим (например, чтением писем), диалог загрузки закроется.

 21 нояб. 2016 г., 11:48
@ Лаки, это только по умолчанию. Вполне возможно, что пользователь Chrome укажет, где следует сохранить загрузки, и, следовательно, увидит диалоговое окно.
 20 мар. 2017 г., 19:40
плохая идея, потому что вы активируете размытие на tabchange или любое действие за пределами окна
 14 февр. 2014 г., 17:13
Это простой подход, который идеально подходит для избавления от оверлея загрузки для загрузки файла, которая была инициирована с помощьюonbeforeunload Спасибо.
 09 дек. 2015 г., 13:14
Chrome и другие подобные браузеры автоматически загружают файлы, где это условие не выполняется.
 03 июн. 2014 г., 01:15
Это не работает во всех браузерах (некоторые не оставляют / размывают текущее окно как часть рабочего процесса загрузки, например Safari, некоторые версии IE и т. Д.).

который реализует метод, похожий на тот, который описан в булл.ответ, Я надеюсь, что это может быть полезно для кого-то здесь. Проект GitHub называетсяреакция-monitor.js

По умолчанию он используетspin.js в качестве индикатора ожидания, но он также предоставляет набор обратных вызовов для реализации пользовательского индикатора.

JQuery поддерживается, но не требуется.

Notable features

Simple integration No dependencies JQuery plug-in (optional) Spin.js Integration (optional) Configurable callbacks for monitoring events Handles multiple simultaneous requests Server-side error detection Timeout detection Cross browser

Example usage

HTML

<!-- the response monitor implementation -->
<script src="response-monitor.js"></script>

<!-- optional JQuery plug-in -->
<script src="response-monitor.jquery.js"></script> 

<a class="my_anchors" href="/report?criteria1=a&criteria2=b#30">Link 1 (Timeout: 30s)</a>
<a class="my_anchors" href="/report?criteria1=b&criteria2=d#10">Link 2 (Timeout: 10s)</a>

<form id="my_form" method="POST">
    <input type="text" name="criteria1">
    <input type="text" name="criteria2">
    <input type="submit" value="Download Report">
</form>

Клиент (простой JavaScript)

//registering multiple anchors at once
var my_anchors = document.getElementsByClassName('my_anchors');
ResponseMonitor.register(my_anchors); //clicking on the links initiates monitoring

//registering a single form
var my_form = document.getElementById('my_form');
ResponseMonitor.register(my_form); //the submit event will be intercepted and monitored

Клиент (JQuery)

$('.my_anchors').ResponseMonitor();
$('#my_form').ResponseMonitor({timeout: 20});

Клиент с обратными вызовами (JQuery)

//when options are defined, the default spin.js integration is bypassed
var options = {
    onRequest: function(token){
        $('#cookie').html(token);
        $('#outcome').html('');
        $('#duration').html(''); 
    },
    onMonitor: function(countdown){
        $('#duration').html(countdown); 
    },
    onResponse: function(status){
        $('#outcome').html(status==1?'success':'failure');
    },
    onTimeout: function(){
        $('#outcome').html('timeout');
    }
};

//monitor all anchors in the document
$('a').ResponseMonitor(options);

Сервер (PHP)

$cookiePrefix = 'response-monitor'; //must match the one set on the client options
$tokenValue = $_GET[$cookiePrefix];
$cookieName = $cookiePrefix.'_'.$tokenValue; //ex: response-monitor_1419642741528

//this value is passed to the client through the ResponseMonitor.onResponse callback
$cookieValue = 1; //for ex, "1" can interpret as success and "0" as failure

setcookie(
    $cookieName,
    $cookieValue,
    time()+300,            // expire in 5 minutes
    "/",
    $_SERVER["HTTP_HOST"],
    true,
    false
);

header('Content-Type: text/plain');
header("Content-Disposition: attachment; filename=\"Response.txt\"");

sleep(5); //simulate whatever delays the response
print_r($_REQUEST); //dump the request in the text file

Для большего количества примеров проверьтеПримеры папка в хранилище.

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

If the file is ready, do the download. If the file is not ready, show the progress.

Тогда вы можете пропустить весь беспорядок iframe / wait / browserwindow, но при этом получить действительно элегантное решение.

 JW.10 июл. 2009 г., 00:01
Это похоже на подход временного файла, который я упоминал выше. Я мог бы сделать что-то подобное, если окажется, что моя идея невозможна, но я надеялся избежать этого.

Ваш ответ на вопрос