進行状況バーをパーセンテージで表示する方法は？

Question

アップロードの進捗状況を画面にパーセントで表示する方法はありますか？私は0％で始まり、percentComplete変数からの出力パーセンテージを表示したいと思います。アップロードが完了したら、進行状況バーに完了したメッセージが表示されます。誰かがいくつかの例を提供できるなら、私はそれを感謝するだろう。ありがとうございました。ここで

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

は私のjQueryの機能である：

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

あなたはpluploadを検討していますか？これはその中心的な例で、単純なテキストパーセンテージです。http://www.plupload.com/examples/core