파일 업로드 및 진행 표시 줄

Question

파일을 업로드 할 때 읽는 파일의 양에 따라 진행률 표시 줄을 표시하려고합니다.

우리는 JS와 서블릿을 사용하여 어떻게 이것을 할 수 있습니까? 나는 아파치 커먼즈 라이브러리를 사용할 수 있지만 업로드 된 데이터에 따라 프로 게스 바를 어떻게 표시 할 것인가?

읽을 수있는 데이터의 양에 따라 JS 코드에 현저한 응답을 보내야합니까? 그렇다면 어떻게 읽힐 수 있습니까? 또는 어느 누구보다 나은 대안을 아는가?

Answer 1

내 응용 프로그램에서이 코드를 사용하여 동적으로 진행률 막대를 테이블에 추가 했으므로 한 무리의 코드를 잘라서 누락되었을 수 있습니다. set_percantage 방법으로이 서버에 post을 간단하게 호출 할 수 있습니다.

죄송합니다. 거기에 몇 가지 독일어가 쓰여 있거나 거기에 한두 개의 스테이트 매트가있는 경우 원본에서는 400 줄과 같이 커다란 테이블을 채우고 있습니다.

편집 : 나는이에 applet하여 정보를 얻고, 거기 당신은 단순히 서버

function addDownload(filename, datPfad) { 


    var table  = document.getElementById("download_table"); 
    var body  = table.getElementsByTagName("tbody")[0]; 

    var progres  = function() { 

    var getVars      = this;  
    this.file      = filename; 

    this.tr       = document.createElement("tr"); 

    this.td3      = document.createElement("td"); 

    this.progress     = document.createElement('div'); 
    this.container     = document.createElement("div"); 
    this.progressbar    = document.createElement("div"); 
    this.bar      = document.createElement("div"); 
    this.text      = document.createElement("div"); 
    this.path      = datPfad; 

    this.progressbar.style.width  = "100%"; 
    this.progressbar.style.height = "20px"; 
    this.text.style.fontSize   = "10px"; 

    this.bar.className    = "progress"; 

    this.progressbar.appendChild(this.bar); 


    this.text.style.marginTop  = "-19px" 
    this.text.style.textAlign  = "center"; 
    this.text.style.textSize   = "15px"; 


    this.text.appendChild(document.createTextNode("Download starting")); 
    this.progressbar.appendChild(this.text); 

    this.container.appendChild(this.progressbar); 

    this.td3.appendChild(this.container); 

    this.td3.setAttribute("width", "32%"); 

    this.tr.appendChild(this.td3); 

    this.tr.setAttribute("style", "background:rgb(245, 245, 245)"); 

    this.tr.setAttribute("id",filename); 

    body.appendChild(this.tr); 

    this.set_percantage = function() { 
      progress    = document.jsap.getProgress(getVars.file); 
      this.bar.style.width = progress + "%"; 
      downloaded    = document.jsap.getDownloadedSize(getVars.file); 
      filesize    = document.jsap.getDownloadSize(getVars.file); 
      this.text.removeChild(this.text.firstChild); 
      textnode = (downloaded == 0.0 || filesize == -1.0) ? "Download starting" : downloaded + " MB of " + filesize + " MB downloaded"; 
      this.text.appendChild(document.createTextNode(textnode)); 
      if(downloaded >= filesize && downloaded != 0) { 
       row.beendet(); 
      } 


    } 

    this.interval = window.setInterval(function() { 
     if(boxbuffer.innerHTML == "finished") { 
      window.clearInterval(this.interval); 
     } 
     row.set_percantage(); 
    },2000); 

} 

에 post를 쓸 수와 나는 여기에 CSS 클래스 잊었 :

.progress { 
      width:0%; 
      height:100%; 
      background: rgb(30,205,230); /* Old browsers */ 
      /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
      background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMWVjZGU2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVhOWNmYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); 
      background: -moz-linear-gradient(38deg, rgba(30,205,230,1) 0%, rgba(90,156,250,1) 100%); /* FF3.6+ */ 
      background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(30,205,230,1)), color-stop(100%,rgba(90,156,250,1))); /* Chrome,Safari4+ */ 
      background: -webkit-linear-gradient(38deg, rgba(30,205,230,1) 0%,rgba(90,156,250,1) 100%); /* Chrome10+,Safari5.1+ */ 
      background: -o-linear-gradient(38deg, rgba(30,205,230,1) 0%,rgba(90,156,250,1) 100%); /* Opera 11.10+ */ 
      background: -ms-linear-gradient(38deg, rgba(30,205,230,1) 0%,rgba(90,156,250,1) 100%); /* IE10+ */ 
      background: linear-gradient(38deg, rgba(30,205,230,1) 0%,rgba(90,156,250,1) 100%); /* W3C */ 
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1ecde6', endColorstr='#5a9cfa',GradientType=1); /* IE6-8 fallback on horizontal gradient */ 
      z-index:2; 
      } 

을 그래서, 내가 기본적으로하고있는 것은 0 % 너비의 div elemnt를 만드는 것입니다. xml은 다운로드 한 파일의 procentual을 반환합니다. 이 숫자를 기준으로 div 요소의 폭을 늘리고 있습니다.