Отображение прогресса загрузки страницы с помощью JavaScript - PullRequest
2 голосов
/ 08 мая 2009

Я получаю список файлов из веб-службы и отображаю их в виде ссылок. Когда кто-то нажимает на ссылку, файл должен начать загрузку. Проблема в том, что прямого доступа к файлу не существует. Вот процесс загрузки файла:

  1. Пользователь нажимает на ссылку
  2. Сервер вызывает веб-сервис для получения файла
  3. Браузер загружается столько времени, сколько требуется, чтобы вернуть файл из веб-службы
  4. Браузер наконец-то предлагает пользователю файл для скачивания

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

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

Я ищу советы не только на стороне клиента, чтобы дать достаточную обратную связь, но, возможно, также на стороне сервера (используя ASP.Net), на всякий случай, если я могу что-то сделать, чтобы упростить процесс. Спасибо.

Обновление : поясним, что это загрузка файла на компьютер пользователя. Что я конкретно ищу, так это способ определить, когда файл готов к загрузке. Поэтому, когда вышеприведенный шаг # 4 будет выполнен, я бы хотел удалить сообщение «Загрузка ...».

Ответы [ 5 ]

2 голосов
/ 08 мая 2009

Звучит так, как будто вам нужно предоставить новый URL-адрес запроса на вашем сервере, единственное задание которого состоит в том, чтобы отвечать, завершен ли поиск в веб-сервисе (или, если нет, на сколько он прошел).

Проводите опрос AJAX для этой службы каждые несколько секунд и удаляйте сообщение «Загрузка ...», когда он отвечает, что файл готов.

Клиент должен отправить идентификатор сеанса (возможно, также идентификатор файла), чтобы сервер знал, о каком файле запрашивается. Серверная сторона должна иметь возможность связаться с запущенным процессом / потоком поиска веб-сервисов, чтобы узнать, как далеко он зашел. (Если он не может найти поток, то, вероятно, он закончил.)

1 голос
/ 08 мая 2009

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

Пример, показывающий, как 'Загрузка - Пожалуйста, подождите' Сценарий отображения сообщения , за которым вы можете следовать.

РЕДАКТИРОВАТЬ-

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

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

1 голос
/ 08 мая 2009

Если вы ссылаетесь на ASHX, который захватывает файл и записывает его обратно в поток, вы можете изменить событие щелчка ссылки, чтобы отобразить сообщение.

$(function () {
  $("a.someClass").click(function () {
    $("div.message").fadeIn();  // show a loading message
    return true; // make sure the link still gets followed
  });
});

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

Редактировать: Поскольку вы не имеете прямой связи с ASHX:

$(function () {
  var ashxCallback = function (data, textStatus) {
    // data could be: xmlDoc, jsonObj, html, text, etc...
    this; // the options for this ajax request
    // textStatus can be one of: "timeout", "error", "notmodified", "success", "parsererror" 
    alert(textStatus);
  };

  $("a.someClass").click(function () {
    $("div.message").fadeIn();  // show a loading message
    $.get("some.ashx?id=1234", "", ashxCallback);
    return false;
  });
});

Использование jQuery.get () и jQuery.post () .

Правка № 2: У меня просто была другая мысль. Что если сообщение «Загрузка ...» было в фрейме, перенаправленном в файл? Таким образом, вы должны отобразить iframe с помощью jQuery, у него будет сообщение по умолчанию «Загрузка ...» и небольшая анимация вращения, а затем установить src / location для iframe в ASHX, который загружается вечно. Затем вы можете передать ему обработчик загрузки с родительской страницы iframe, который будет скрывать / удалять его. Дайте мне знать, если вам нужен пример кода.

1 голос
/ 08 мая 2009

вы можете использовать полную опцию для функции $ .ajax в jquery, которая должна вызываться после завершения запроса

0 голосов
/ 08 мая 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...