Question

我正在使用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 ++;

            }

我希望在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>

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

Answer 1

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

target="_blank"

但我没试过。

这里说的另一种方法是使用Ajax提交数据。可能会将文件数据转换为base64而根本不提交表单。看看这里：

Submit form and stay on same page?

带进度条的文件上传

1 个答案: