XMLHttpRequest неточный процент выполнения загрузки - PullRequest
Новая
       9

XMLHttpRequest неточный процент выполнения загрузки

1 голос
/ 24 апреля 2019

У меня есть этот код, который отлично работает внутри моего электронного приложения.Он будет управлять загрузкой файлов.Запрос обрабатывается встроенным php-сервером, который в macOS является сервером разработки php по умолчанию, а в windows расположен в папке, которая будет содержать бинарный файл php и будет частью окончательной сборки моего приложения.Я реализовал прогресс XMLHttpRequest, чтобы отобразить для пользователя индикатор выполнения начальной загрузки 4, и он должен отслеживать состояние загрузки.Я заметил, что каждый раз, когда я буду загружать файл, независимо от его размера, процент будет равен 100%, даже если загрузка файла продолжается.Есть ли способ сделать это более точным?Я использую пользовательский класс, который будет полагаться на функции ftp php для связи с сервером и последующей загрузки файлов. Эти файлы в основном представляют собой видео, а максимальное измерение также может составлять 400/500 МБ, поэтому мне нужен точный процент, чтобы избежатьПользователь прерывает процесс или закрывает приложение, потому что считает, что оно не работает.

Вот код js, который я использую для создания прототипа приложения: 

<script type="text/javascript">
const bsCustomFileInput = require('bs-custom-file-input');

$(document).ready(function(){

  bsCustomFileInput.init();

  $('#file-uploader').submit(function(e){
    e.preventDefault();

    var formData = new FormData($('#file-uploader')[0]);
    //formData.append('uploaded_file', $('#file-uploader')[0]);
    $('.modal').modal('show');

    $.ajax({
      xhr: function(){
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt){
          if(evt.lengthComputable){
            var percentComplete = evt.loaded / evt.total;
            percentComplete = parseInt(percentComplete * 100);
            console.log(percentComplete);
            $('.progress-bar').css('width',percentComplete+"%");
            $('.progress-bar').html(percentComplete+"%");
              if(percentComplete === 100){

              }
          }
        }, false);
        return xhr;
      },
      type: 'POST',
      url: 'http://127.0.0.1:8000/requestsController.php',
      data: formData,
      processData: false,
      contentType: false,
      cache: false,
      success: function(response){
        $('.modal').modal('hide');
        console.log(response);
      }
    });

  });


});
</script>
...