Javascript Statusleiste funktioniert nicht in Chrome, in Firefox

Question

Ich habe ein Problem, einen Fortschrittsbalken mit, während die Daten mit einer Datei in meiner app importieren

Dies funktioniert gut in Firefox, aber in Chrome der Fortschrittsbalken gehen nur von 0 % bis 100%.

ich choosed Jquery Ajax mit Asynchron falsch, weil Datei mit 30000 Linien wurden für Ihre Hilfe

Javascript

Thanx aus ressources gehen:

function processCsvFile(url) { 
    $('#progressBarBulkImportDiv').addClass('show').removeClass('hide'); 
    $('#fileSelectDiv').addClass('hide'); 
    $('#fileUploadInfos').addClass('hide'); 
    $('#upload').addClass('hide'); 
    document.getElementById('progressBarBulkImport').innerHTML = '0%'; 
    var fileUpload = document.getElementById("fileUpload"); 
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/; 
    if (regex.test(fileUpload.value.toLowerCase())) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      var rows = e.target.result.split("\n"); 
      console.log(rows); 
      var totalRows = rows.length - 1; 
      localStorage.setItem("totalRows", totalRows); 
      var successRows = 0; 
      var currentRow = 0; 
      for (var i = 1; i < rows.length; i++) { 
       console.log("line" + i); 
       var cells = rows[i].replace(/[/]/g, "-5-8-3-"); 
       urlajax = url + cells; 
       $.ajax({ 
        url: urlajax, 
        async: false, 
        success: function (result) { 
         console.log("etape 4"); 
         currentRow = parseInt(currentRow) + parseInt('1'); 
         var reglede3 = Math.round(parseInt(currentRow) * parseInt('100')/parseInt(totalRows)).toString(); 
         console.log(reglede3 + '%'); 
         document.getElementById('progressBarBulkImport').innerHTML = reglede3 + '%'; 
         $('#progressBarBulkImport').width(reglede3+'%').attr('aria-valuenow', reglede3); 
         successRows = parseInt(successRows) + parseInt(result); 
         if (parseInt(currentRow) == parseInt(totalRows)) 
         { 
          console.log("5"); 
          localStorage.setItem("successRows",successRows); 
          $('#resultInsertFile').addClass('show').removeClass('hide'); 
          document.getElementById('resultInsertFile').innerHTML = localStorage.getItem("successRows")+"/"+localStorage.getItem("totalRows")+' correctement inséré(s)'; 
          $('#progressBarBulkImport').removeClass('active'); 
         } 
        } 
       }); 
      } 
     }; 
     reader.readAsText(fileUpload.files[0]); 

    } else { 
     alert("Merci de charger un CSV valide"); 
    } 
} 

Html:

<form action="#" method="post" class="form-horizontal"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title font_exo_2" id="myModalLabel">Import Assets SCOPE GP via .csv</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="main_container"> 
        <input type="hidden" name="formAction" value="addViaFile"> 
        <div class="form-group paddingViaFile"> 
         <div class="input-group" id="fileSelectDiv"> 
          <span class="input-group-btn"> 
           <span class="btn btn-primary btn-file"> 
            Parcourir&hellip; <input type="file" id="fileUpload" accept=".csv"> 
           </span> 
          </span> 
          <input type="text" class="form-control" readonly> 
         </div> 
         <span class="help-block" id="fileUploadInfos"> 
          Télécharger un fichier .csv vide au bon format <a href="{{ asset('examples/scope_import_example.csv') }}" class="alert-link">Ici</a> 
         </span> 
         <div class="progress hide" id="progressBarBulkImportDiv"> 
          <div class="progress-bar active progress-bar-success progress-bar-striped" id="progressBarBulkImport" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%"> 
          </div> 
         </div> 
         <div class="hide text-center" id="resultInsertFile"></div> 
        </div> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-warning" data-dismiss="modal">Fermer</button> 
       <button type="button" class="btn btn-success" id="upload" onclick="processCsvFile('/ajax/insert/scope_import/');">Envoyer</button> 
      </div> 
      </form> 

Konsolenprotokoll mit async "false":

iam.js:92 line1 
iam.js:99 etape 4 
iam.js:102 0% 
iam.js:92 line2 
iam.js:99 etape 4 
iam.js:102 0% 
iam.js:92 line3 
iam.js:99 etape 4 
iam.js:102 0% 
iam.js:92 line4 
iam.js:99 etape 4 
iam.js:102 0% 
iam.js:92 line5 
iam.js:99 etape 4 
iam.js:102 0% 
iam.js:92 line6 
iam.js:99 etape 4 
iam.js:102 1% 
iam.js:92 line7 
iam.js:99 etape 4 
iam.js:102 1% 
iam.js:92 line8 

Console Protokoll mit async "true":

line1 iam.js:92:17 
line2 iam.js:92:17 
line3 iam.js:92:17 
lineXXX iam.js:92:17 
lineXXX iam.js:92:17 
line30587 iam.js:92:17 

etape 4 iam.js:98:25 
0% iam.js:101:25 
etape 4 iam.js:98:25 
0% iam.js:101:25 
etape 4 iam.js:98:25 
0% iam.js:101:25 
etape 4 iam.js:98:25 
0% iam.js:101:25 
etape 4 iam.js:98:25 
0% iam.js:101:25 
etape 4 iam.js:98:25 
1% iam.js:101:25 
etape 4 iam.js:98:25 
1% iam.js:101:25 
etape 4 iam.js:98:25 
1% iam.js:101:25 
etape 4 iam.js:98:25 
1% iam.js:101:25 
etape 4 iam.js:98:25 
1% iam.js:101:25 
etape 4 iam.js:98:25 
1% iam.js:101:25 

Answer 1

neugierig, wenn ich hinzufügen:

if (reglede3 % 5 === 0) { 
         document.getElementById('progressBarBulkImport').innerHTML = reglede3 + '%'; 
         $('#progressBarBulkImport').width(reglede3+'%').attr('aria-valuenow', reglede3); 
        } 

die