Wie wird der Fortschrittsbalken in Prozent angezeigt?

Question

Wie kann ich den Fortschritt meines Uploads auf dem Bildschirm in Prozent anzeigen? Ich möchte den Balken zeigen, der mit 0% beginnt und den Prozentwert von percentComplete variabel. Sobald der Upload abgeschlossen ist, möchte ich, dass die Nachricht in der Statusleiste angezeigt wird. Wenn jemand einige Beispiele liefern kann, würde ich das schätzen. Vielen Dank.

<div>Select file for upload: 
    <input type="file" id="fileUpload" name="fileUpload" onChange="fileUpload()"/> 
    <span id="showBar"></span> 
</div> 

Hier ist meine JQuery-Funktion:

function fileUpload(){ 
    var reader = new FileReader(); 
    var file = fileExist.files[0]; 

    reader.onload = function(e) { 
     var text = reader.result.split(/\r\n|\n/); 
     var myForm = new FormData(document.getElementById('myForm'));      

     $.ajax({ 
      /*Start-Progress Bar Code*/ 
      xhr: function(){ 
       var xhr = new window.XMLHttpRequest(); 

       xhr.upload.addEventListener("progress", function(evt){ 
        if(evt.lengthComputable){ 
         var percentComplete = evt.loaded/evt.total; 
         percentComplete = parseInt(percentComplete * 100); 
         console.log(percentComplete); 

         if(percentComplete === 100){ 
          console.log("Successfully uploaded!"); 
         } 
        } 
       },false); 
       return xhr; 
       }, 
       /*End*/ 
       type: 'POST', 
       url: 'FileUpload.cfc?method=uploadFile', 
       data: new FormData($('#myForm')[0]), 
       cache: false, 
       contentType: false, 
       enctype: 'multipart/form-data', 
       processData: false, 
       dataType: 'json' 
      }).done(function(obj){ 
       if(obj.STATUS === 200){ 
        $('#myForm')[0].reset(); 
       }else{ 
        alert('Error!'); 
       } 
      }).fail(function(jqXHR, textStatus, errorThrown){ 
       alert(errorThrown); 
      }) 
    } 
    reader.readAsText(file, 'UTF-8'); 
} 

Answer 1

Haben Sie Plupload in Betracht gezogen? Dies ist ihr Kernbeispiel mit einfachem Textprozentsatz: http://www.plupload.com/examples/core