進捗パターンアップロードノードjs ajax

Question

私はドキュメントファイルアップローダーを構築しています。私はアップロードの状態のパーセンテージを表示したいと思います。

<div class="modal-body"> 
    <div class="container_upload" id="new_file_form"> 
    <div id="div_new_file_form" class="text-center" style="padding:2%;"> 
     <div class="form-group text-center"> 
     <input type="file" class="form-control" name="file_images" 
      id="url_file" multiple="true" accept=".pdf,.doc,.xls,.ppt,.docx,.xlsx,.pptx"/> 
     </div>  
     <button class="btn btn-success btn-lg" id="insert_btn">Carica</button> 
     <br> 
    </div> 
    </div> 
</div> 

私は私のアップローダーを設定へのfileinput.jsを使用：

$("#url_file").fileinput({ 
    language: 'it', 
    showUpload: false, 
    previewFileType:'any', 
    maxFileCount: max_n_files, 
    maxFileSize: maxsize/1000, //kB 
    browseClass: "btn btn-primary", 
    browseLabel: "Seleziona File", 
    browseIcon: "<i class=\"glyphicon glyphicon-file\"></i> ", 
    removeClass: "btn btn-danger", 
    removeLabel: "Elimina", 
    uploadClass: "btn btn-info", 
    uploadUrl: "http://localhost/upload", 
    allowedFileExtensions: ["pdf", "doc", "xls", "ppt", "docx", "xlsx", "pptx"] 
}); 

と私は、ファイルは、それが処理されています私のノードサーバにファイルを送信するために、AJAX呼び出しを使用していました。私ノードのjsルートで

$.ajax({ 
    beforeSend: showLoaderModal(), 
    url: '/uploadFile', 
    data: myFormData, 
    processData: false, 
    cache: false, 
    contentType: false, 
    type: 'POST', 
    xhr: function() { 
     var xhr = new XMLHttpRequest(); 
     xhr.upload.onprogress = function(e) { 
      percentage = Math.floor(e.loaded/e.total *100) + '%'; 
      //$(".progress-bar").append(percentage); 
      $(".progress-bar").empty(); 
      $(".progress-bar").append(percentage); 
      $("progress-bar").attr("style","color: white;"); 
      //console.log(percentage); 
      //console.log(percentage === "100%"); 

      $(".progress-bar").animate({ 
       width: percentage 
      }, 
      function() { 
       upload_end = $(".progress-bar").css("width"); 
       console.log(upload_end); 
       if(upload_end == "100%") { 
       console.log("ci siamo"); 
       $(".end_upload").empty(); 
       $(".end_upload").append('Upload completato. Conversione file in corso... '); 
       } 
      }); 

      console.log(myFormData);   
     }; 

     return xhr; 
    } 

    }).done(function (msg, state) { 
     hideLoaderModal(); 
     success_msg(msg); 
     getMySize('size_disp'); 
     $("#url_file").fileinput('clear'); 

     if(msg.status == "DOCUMENT_UPLOADED"){ 
     $("#upload_modal").modal('toggle'); 
     //setTimeout(function(){ window.location.href ='/myFiles'; }, 2000); 
     } 

     $("#msg_booking").empty(); 
     $("#msg_no_file").empty(); 

     //call the getFiles function again for updating the list 
     if(window.location.pathname === '/book') { 
     get_myFiles(false); 
     } 
     else if(window.location.pathname.toLowerCase() === '/myfiles') { 
     getMyFiles(); 
     } 

    }).fail(function (jqXHR, textStatus, errorThrown) { 
    hideLoader(); 
    $("#upload_modal").modal('toggle'); 
    $("#url_file").fileinput('clear'); 
    getMySize('size_disp'); 

    if(window.location.pathname === '/book') { 
     get_myFiles(false); 
    } 
    else if(window.location.pathname.toLowerCase() === '/myfiles') { 
     getMyFiles(); 
    } 

    if(jqXHR.responseText) { 
     msg = JSON.parse(jqXHR.responseText); 
     error_msg(msg); 
    } 
    else { 
     error_msg(textStatus); 
     //alert("An error occurred:\n" + textStatus); 
    } 
}); 

私は私のDB内のファイルの情報を入れて、ファイルをPDF形式にはない場合、私はそれを変換します。 私の質問は：アップロードの実行状況をどのように追跡できますか？ xhr.upload.onpgrogressがAjaxコールの前に終了するためです。

Answer 1

私はあなたのプログレスバーは、この部分で動作させるためにONCHANGEを使用するために不足しているかもしれないと思う：

$(".progress-bar").animate({ 
        width: percentage 
       }, function() { 
        upload_end = $(".progress-bar").css("width"); 
        console.log(upload_end); 
        if(upload_end == "100%") { 
         console.log("ci siamo"); 
         $(".end_upload").empty(); 
         $(".end_upload").append('Upload completato. Conversione file in corso... '); 
        } 
       }); 

あなたがのonchange関数内で、あなたのAJAXを配置する必要があり、およびAJAXを呼び出すmigh。このlinkをフォローし、あなたにこのような

を助けるかもしれない：

$('.upload-btn').on('click', function(){ 
    $('#upload-input').click(); 
    $('.progress-bar').text('0%'); 
    $('.progress-bar').width('0%'); 
}); 

$('#upload-input').on('change', function(){ 

    var files = $(this).get(0).files; 

    if (files.length > 0){ 
    // create a FormData object which will be sent as the data payload in the 
    // AJAX request 
    var formData = new FormData(); 

    // loop through all the selected files and add them to the formData object 
    for (var i = 0; i < files.length; i++) { 
     var file = files[i]; 

     // add the files to formData object for the data payload 
     formData.append('uploads[]', file, file.name); 
    } 

    $.ajax({ 
     url: '/upload', 
     type: 'POST', 
     data: formData, 
     processData: false, 
     contentType: false, 
     success: function(data){ 
      console.log('upload successful!\n' + data); 
     }, 
     xhr: function() { 
     // create an XMLHttpRequest 
     var xhr = new XMLHttpRequest(); 

     // listen to the 'progress' event 
     xhr.upload.addEventListener('progress', function(evt) { 

      if (evt.lengthComputable) { 
      // calculate the percentage of upload completed 
      var percentComplete = evt.loaded/evt.total; 
      percentComplete = parseInt(percentComplete * 100); 

      // update the Bootstrap progress bar with the new percentage 
      $('.progress-bar').text(percentComplete + '%'); 
      $('.progress-bar').width(percentComplete + '%'); 

      // once the upload reaches 100%, set the progress bar text to done 
      if (percentComplete === 100) { 
       $('.progress-bar').html('Done'); 
      } 

      } 

     }, false); 

     return xhr; 
     } 
    }); 

    } 
});