如何以百分比显示进度条？

如何以百分比显示我在屏幕上上传的进度？我想显示从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'); 
}

来源

2016-11-17 espresso_coffee

为什么你读取一个文件而不用它来做任何事情？ – Endless

你有没有考虑plupload？这是他们的核心示例，具有简单的文本比例：http://www.plupload.com/examples/core

来源

2016-11-18 01:27:09 Jules

我更喜欢上传我的JavaScript/JQuery方法，代码工作正常，我只需要显示屏幕上进度的部分。就像百分比从0％开始一直到100％，然后隐藏一次完成。 –

如何以百分比显示进度条？

回答

相关问题