Индикатор выполнения для загрузки изображения с помощью jQuery $.ajax и Spring Boot

У меня возникли проблемы с настройкой индикатора выполнения в сообщении $.ajax, которое загружает изображение в службу Cloudinary через @Controller с платформой Spring. Моя проблема в том, что событие, которое отслеживает процесс загрузки, имеет весь файл, загруженный с самого начала.

ProgressEvent {isTrusted: true, lengthComputable: true, loaded: 8718, total: 8718,
type: "progress"…}

Это мой код:

 var token = $("meta[name='_csrf']").attr("content");
 var header = $("meta[name='_csrf_header']").attr("content");
 $.ajaxSetup({
      beforeSend: function(xhr){
          xhr.setRequestHeader(header, token);
     }
 });
 /*<![CDATA[*/
 for(var i = 0; i < filesList.length; i++){
  /*]]>*/
       var formData = new FormData();
       formData.append("file", filesList[i]);
          $.ajax({
              xhr: function()
                 {
                  var xhr = $.ajaxSettings.xhr();
                  //Upload progress
                  xhr.upload.addEventListener("progress", function(event){

                      if (event.lengthComputable) {
                          var percentage = Math.round((event.loaded *100) / event.total);

                          $(".progress-bar").css("width", percentage + "%");
                      }
                  }, false);
                  return xhr;
                  },

              url:  "/admin/web/cms/upload",
              type: "POST",
              contentType: false,
              processData: false,
              data: formData,

              success: function(data) {
                 $(".progress-bar").css("width", "0%");
              }
         });
         console.log(filesList[i].size);
  }

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


spring jquery cloudinary
person Aleix Alcover    schedule 31.07.2017    source источник
comment
Вы нашли какое-нибудь решение?   -  person Gurinder    schedule 07.01.2019
comment
Да, но с совершенно другим подходом. Я разместил фрагмент кода, который сработал для меня. Я бы порекомендовал вам проверить документацию Cloudinary для функции cloudinary_fileupload.   -  person Aleix Alcover    schedule 07.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

Решение было таким, с функцией cloudinary_fileupload:

 $(".cloudinary-fileupload").cloudinary_fileupload({

  ...

     progressall: function(e, data){
          $(".progress-bar").width(Math.round((data.loaded * 100.0) / data.total) + "%");
          $(".progress-bar").text(Math.round((data.loaded * 100.0) / data.total) + "%");

          if((Math.round((data.loaded * 100.0) / data.total) === 100) && filesAmount > -1){
                 $(".progress-bar").text('');
                 $("#uploading").text(processingImatges);
                 $(".progress-bar").addClass("progress-bar-striped progress-bar-animated");

                         $(window).bind('beforeunload', function(){ 
                         return processingImatges;
                 });
          }
      },

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

person Aleix Alcover    schedule 07.01.2019