Отображение индикатора выполнения при загрузке файла с сервера

Question

Мне нужно показать индикатор выполнения пользователю, который запрашивает файл для загрузки. Я использую приложение J2EE для создания файла. Пользователь отправит данные формы, чтобы получить файл. Сервер принимает все представленные данные, обрабатывает, генерирует и отправляет файл PDF обратно клиенту.

Итак, я хочу показать индикатор выполнения пользователю до тех пор, пока файл не перейдет на клиентскую сторону. Есть какой-либо способ сделать это ?

Answer 1

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

Если это правда, вы имеете дело с тяжелым упражнением. Надежный индикатор прогресса должен знать (довольно точно), что вы делаете и сколько времени это займет. В вашем случае существует множество ненадежных факторов (одним из них, возможно, самым большим, является сама сеть).

Таким образом, большинство разработчиков используют какую-то «бесконечную» анимацию для отображения «незавершенного производства».

обновление

Исходя из вашего комментария, самый простой способ отобразить анимацию "в процессе работы" будет выглядеть так:

$.ajax({
    url:      "/myscripts/myserverscript",
    type:     "POST",
    data:     {
       foo: "bar"
    },
    dataType: "text",
    beforeSend: function(xhr){
        // display a progress animation
    },
    complete: function(xhr, status){
        // hide the animation
    }
    ...
});

В случае одного запроса. Вы также можете установить глобальный обработчик событий ajax для обоих (.ajaxStart() и .ajaxStop()), чтобы настроить функцию show / hideallallity.

Ссылки: .ajax () , .ajaxStart () , .ajaxStop ()

Answer 2

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

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

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

Клеевые части здесь:

• когда исходный запрос генерирует файл, он должен хранить ход выполнения с частыми интервалами (т. Е. Каждые 10%). Сохранение этих данных в сеансе http будет работать нормально.
• другие запросы (ajax) просто должны быть в состоянии извлечь эту информацию из http сессии
• синхронизация (сериализация доступа) в сеансе http, о чем обычно делают некоторые веб-приложения, не может быть и речи, поскольку другие запросы (ajax) будут просто блокироваться до завершения исходного запроса
• на стороне клиента это все html + javascript, чтобы обеспечить взаимодействие, которое вам нужно (анимированный индикатор выполнения). Даже если интервалы очень грубые (скачок с 10% до 20% до 30%), вы можете анимировать панель с помощью jQuery. Я делал это однажды в прошлом, и это выглядит великолепно.

индикатор загрузки файла:

Лучше оставить это в родном диалоге браузера.

Answer 3

Используя XMLHttpRequest , вы можете загрузить файл и показать прогресс.

showProgressBar(); 
var xhr = new XMLHttpRequest();
xhr.open("GET", 'https://upload.wikimedia.org/wikipedia/commons/d/dd/Big_%26_Small_Pumkins.JPG', true);
xhr.responseType = "blob";
xhr.onprogress = function (e) {
    console.log(e.loaded / e.total * 100);//shows downloaded percentage
    setProgressBarPercentage(e.loaded / e.total * 100);
}
xhr.onload = function () {
    hideProgressBar();
    var urlCreator = window.URL || window.webkitURL;
    var url = urlCreator.createObjectURL(this.response);
    var link = document.createElement('a');
    link.setAttribute('href', url);
    link.setAttribute('download', 'FILENAME');
    link.click();
}
xhr.send();

Answer 4

В Java вы просто оборачиваете javax.swing.ProgressMonitorInputStream вокруг входного потока, но имейте в виду, что если сервер не отправляет в режиме потоковой передачи, отображение на самом деле ничего не будет значить, так как весь ответ будет считан в память до того, как первый байт будет доставлен в Java.