1

我正在使用 Ajax、jsp 和 servlet 从头开始​​编写代码，以显示客户端上传的文件的进度条。我编写了一个简单的表单，并在客户端的 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 ++;

            }

我希望在 while 循环中通过 AJAX 将“totalBytesWritten”值返回到客户端页面，因为这是正在写入的文件的当前进度。但是我如何在 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>

如何在同一页面上显示进度条？

4

1 回答 1

1

如果您提交的表单不能停留在同一页面，我认为您可以使用空白目标，如下所示：

target="_blank"

但我没试过。

此处所述的另一种方法是使用 Ajax 提交数据。可能将文件数据转换为 base64 并且根本不提交表单。看看这里：

提交表格并停留在同一页面上？

于 2013-05-27T00:28:17.583 回答