Question

我在$ .ajax帖子中设置进度条时遇到问题，该帖子通过带有Spring框架的@Controller将图像上传到Cloudinary服务。我的问题是，监控上传过程的事件将整个文件从头开始上传。

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);
  }

因此，进度条始终显示为已完成。如何管理，监控图像上传过程，使用进度条显示？任何帮助将非常感激。提前谢谢。

Answer 1

解决方案是使用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;
                 });
          }
      },

使用这种方法，进度条可以一次监视所有正在上传的图像，而不是每个监视一次。

使用jQuery $ .ajax和Spring Boot上传图像的进度条

1 个答案: