javascriptとajax呼び出しを使用してファイルのアップロードにプログレスバーを追加する方法は？

Question

ファイルアップローダに進捗バーが必要です。これは

$(function() { 

     $('button[type=button]').click(function(e) { 
      e.preventDefault(); 
      //Disable submit button 
      $(this).prop('disabled',true); 

      var form = document.forms[0]; 
      var formData = new FormData(form); 

      // Ajax call for file uploaling 
      var ajaxReq = $.ajax({ 
       url : URI.file.multipleFileUploadUrl(), 
       type : 'POST', 
       data : formData, 
       cache : false, 
       contentType : false, 
       processData : false, 
       xhr: function(){ 
        //Get XmlHttpRequest object 
        var xhr = $.ajaxSettings.xhr() ; 

        //Set onprogress event handler 

        xhr.upload.onprogress = function(event){ 
         var perc = Math.round((event.loaded/event.total) * 100); 
         $('#progressBar').text(perc + '%'); 
         $('#progressBar').css('width',perc + '%'); 
        }; 

        return xhr ; 
       }, 
       beforeSend: function(xhr) { 
        //Reset alert message and progress bar 
        $('#alertMsg').text(''); 
        $('#progressBar').text(''); 
        $('#progressBar').css('width','0%'); 
       } 
      }); 

      // Called on success of file upload 
      ajaxReq.done(function(msg) { 
       $('#alertMsg').text(msg); 
       $('input[type=file]').val(''); 
       $('button[type=submit]').prop('disabled',false); 
      }); 

      // Called on failure of file upload 
      ajaxReq.fail(function(jqXHR) { 
       $('#alertMsg').text(jqXHR.responseText+'('+jqXHR.status+ 
         ' - '+jqXHR.statusText+')'); 
       $('button[type=submit]').prop('disabled',false); 
      }); 
     }); 
    }); 

は、以下の検索プログレスバーを統合することなく、正常に動作するファイルのアップロードがある私は、ファイルのアップロードやプログレスバーのために使用していますAJAX呼び出しです。私は私のスクリプトで上記のコードを使用する場合は、ファイルのアップロードが完了する前にプログレスバーがすぐに100％に達するが、

function multipleFileUpload(form) { 
    var uploadSuccess = true; 
    var data = new FormData(form); 

    var csrf_headerName = $("meta[name='_csrf_header']").attr("content"); 
    var csrf_paramValue = $("meta[name='_csrf']").attr("content"); 
    ShowLoad(); 
    $.ajax({ 
     type: "POST", 
     enctype: 'multipart/form-data', 
     url: URI.file.multipleFileUploadUrl(), 
     data: data, 
     beforeSend: function (request) { 
      request.setRequestHeader(csrf_headerName, csrf_paramValue); 
     }, 
     processData: false, 
     contentType: false, 
     cache: false, 
     timeout: 6000000, 
     success: function (data) { 
      HideLoad(); 
      data.forEach(function(d, index){ 
       if(d.status === 'ERROR'){ 
        // HideLoad(); 
        uploadSuccess = false; 
        toastr.error('Error has occurred while uploading image file '+d.data.name); 
       }else if(d.data.id != null){ 
        //HideLoad(); 
        //toastr.success('Successfully updated '+d.data.name, 'Upload Success'); 
       } 
      }); 

      if(uploadSuccess){ 
       mediaFileMetaDataSave(data[0],data[1]); 
      } 
     }, 
     error: function (e) { 
      HideLoad(); 
      toastr.error('Error has occurred while uploading attachments.'); 
     } 
    }); 
} 

私は適切にファイルのアップロードを行うことができます。ここで何が間違っていますか？

Answer 1

これは問題なく動作します。

function submitForm(form) { 
     ShowLoad(); 
     var data = new FormData(form); 
     var csrf_headerName = $("meta[name='_csrf_header']").attr("content"); 
     var csrf_paramValue = $("meta[name='_csrf']").attr("content"); 

    $.ajax({ 
     type: "POST", 
     enctype: 'multipart/form-data', 
     url: URI.file.singleFileUploadUrl(), 
     data: data, 
     beforeSend: function (request, xhr) { 
      request.setRequestHeader(csrf_headerName, csrf_paramValue); 
      //Reset alert message and progress bar 
      $('#alertMsg').text(''); 
      $('#progressBar').text(''); 
      $('#progressBar').css('width','0%'); 
     }, 
     processData: false, 

     contentType: false, 
     cache: false, 
     timeout: 6000000, 
     success: function (data) { 
      HideLoad(); 
     }, 

     xhr: function(){ 
      //Get XmlHttpRequest object 
      var xhr = $.ajaxSettings.xhr() ; 
      //Set onprogress event handler 
      xhr.upload.onprogress = function(data){ 
       var perc = Math.round((data.loaded/data.total) * 100); 
       $('#progressBar').text(perc + '%'); 
       $('#progressBar').css('width',perc + '%'); 
      }; 
      return xhr ; 
     }, 
     error: function (e) { 
      HideLoad(); 
      toastr.error('Error has occurred while uploading the media file.'); 
     } 
    }); 
}