2016-11-17 5 views
0

화면의 업로드 진행률을 퍼센트로 표시하려면 어떻게해야합니까? 나는 030 %로 시작하고변수의 출력 비율을 표시하고 싶습니다. 업로드가 완료되면 진행률 표시 줄에서 완료된 메시지를보고 싶습니다. 누구든지 몇 가지 예를 제시 할 수 있다면 감사히 생각합니다. 고맙습니다.진행률 막대를 백분율로 표시하는 방법은 무엇입니까?

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'); 
} 
+0

왜 파일을 읽었으며 사용하지 않습니까? – Endless

답변

0

당신이 plupload을 생각 해 봤나 : 내 JQuery와 기능은 여기에

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

입니까? 간단한 텍스트 백분율을 사용하는 핵심 예제입니다. http://www.plupload.com/examples/core

+0

업로드를 위해 자바 스크립트/JQuery 메서드를 사용하는 것이 좋지만 코드가 정상적으로 작동합니다. 화면에 진행률을 표시하는 부분 만 있으면됩니다. 0 %부터 시작하여 100 %까지 백분율 막대가 한 번 숨기는 것과 같습니다. –

관련 문제