帶進度條的文件上傳

我使用Ajax，jsp和servlets從頭開始編寫代碼，以顯示客戶端上傳文件的進度條。我編寫了一個簡單的表單，並在客戶端的javascript中調用了Ajax回調函數。我在窗體上使用multipart/form-data onSubmit將文件上傳到一個webservlet。我可以將文件上傳到服務器，並按字節順序將其寫入到所需的位置，以便我也可以寫入實際的字節數。帶進度條的文件上傳

我的問題是這樣的。

現在，我想使用ajax來獲取while循環內寫入的字節並顯示在同一頁上。當我提交表單時，頁面會重定向到webservlet。如何保持同一頁面並使用Ajax顯示返回的進度（正在上傳的字節數）？

//Code inside My POST method of webservlet 
//write to file byte by byte (count stored in "totalBytesWritten") 
      while(totalBytesWritten < formDataLength){ 
       fileOuputStream.write(dataBytes, totalBytesWritten ,1); 
       totalBytesWritten ++; 

      }

我希望將「totalBytesWritten」值從while循環中返回通過AJAX客戶端頁面，因爲這是被寫入文件的當前進度。但是我怎麼在while循環中做到這一點？當我提交表單時，頁面會被重定向到其他頁面，但我想在同一頁面上顯示進度。

代碼我使用的數據來自servlet的返回客戶端：

response.getOutputStream().write(totalBytesWritten); 
response.getOutputStream().flush(); 
response.getOutputStream().close();

我的AJAX回調函數：

function ajaxCallProgressBar(){ 
     var xmlhttp; 
     if (window.XMLHttpRequest) 
      {// code for IE7+, Firefox, Chrome, Opera, Safari 
       xmlhttp=new XMLHttpRequest(); 
      } 
     else 
      {// code for IE6, IE5 
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
     xmlhttp.onreadystatechange=function() 
      { 
       if (xmlhttp.readyState==4 && xmlhttp.status==200) 
        { 
         document.getElementById("actualCount").innerHTML=xmlhttp.responseText();; 
       } 
       else { 
         document.getElementById("actualCount").innerHTML="readystate error!"; 
       } 

xmlhttp.open("GET","progressBar",true); 
xmlhttp.send(); 
} //end of function

的實際形式是：

<form action="./progressBar" enctype="multipart/form-data" method="post"  
onsubmit="ajaxCallProgressBar()"> 

<p> 
Type some text (if you like):<br> 
<input type="text" name="textline" size="30"> 
</p> 
<p> 
Please specify a file, or a set of files:<br> 
<input type="file" name="datafile" size="40"> 
</p> 
<div> 
<input type="submit" value="Send"> 
</div> 
</form>

怎麼辦我在同一頁面上顯示進度條？

來源

2013-05-27 Rookie

如果要提交你不能留在同一個頁面的形式，我想你可以使用空白目標爲：

target="_blank"

，但我沒試過。

另一種方式，因爲這裏說的是使用Ajax提交數據。也許可以將文件數據轉換爲base64並且根本不提交表單。看看這裏：

Submit form and stay on same page?

來源

2013-05-27 00:28:17 Marco

帶進度條的文件上傳

回答

相關問題