带进度条的文件上传

我使用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

带进度条的文件上传

回答

相关问题