使用进度条上传Ajax

时间:2012-06-29 05:24:28

标签: javascript ajax file-upload

我有一些代码用于ajax上传。它发送请求到我的servlet,一切正常。但代码包含一个我不需要的进度条。你可以帮我删除我不需要的行吗? 另一个问题是如何在上传文件后用我的内容刷新DIV?当我使用此代码将参数发送到jsp页面时

$.post(
            "deletePoly.jsp",
            {ids:ch.toString()},
           function(per){
          $("#WRAPlist").load("listing.jsp");
            }
          );

我在哪里放线

$("#WRAPlist").load("listing.jsp");

这是上传代码

var req;

    function ajaxFunction()
    {
        var url = "Upload_Servlet";

        if (window.XMLHttpRequest) // Non-IE browsers
        { 
            req = new XMLHttpRequest();
            req.onreadystatechange = processStateChange;

            try 
            {
                req.open("GET", url, true);
            } 
            catch (e) 
            {
                alert(e);
            }
            req.send(null);
        } 
        else if (window.ActiveXObject) // IE Browsers
        { 
            req = new ActiveXObject("Microsoft.XMLHTTP");

            if (req) 
            {
                req.onreadystatechange = processStateChange;
                req.open("GET", url, true);
                req.send();
            }
        }
    }

    function processStateChange()
    {

         *  State   Description
         *  0       The request is not initialized
         *  1       The request has been set up
         *  2       The request has been sent
         *  3       The request is in process
         *  4       The request is complete

        if (req.readyState == 4)
        {
            if (req.status == 200) // OK response
            {
                var xml = req.responseXML;

                // No need to iterate since there will only be one set of lines
                var isNotFinished = xml.getElementsByTagName("finished")[0];
                var myBytesRead = xml.getElementsByTagName("bytes_read")[0];
                var myContentLength = xml.getElementsByTagName("content_length")[0];
                var myPercent = xml.getElementsByTagName("percent_complete")[0];

                // Check to see if it's even started yet
                if ((isNotFinished == null) && (myPercent == null))
                {
                    document.getElementById("initializing").style.visibility = "visible";

                    // Sleep then call the function again
                    window.setTimeout("ajaxFunction();", 100);
                }
                else 
                {
                    document.getElementById("initializing").style.visibility = "hidden";
                    document.getElementById("progressBarTable").style.visibility = "visible";
                    document.getElementById("percentCompleteTable").style.visibility = "visible";
                    document.getElementById("bytesRead").style.visibility = "visible";

                    myBytesRead = myBytesRead.firstChild.data;
                    myContentLength = myContentLength.firstChild.data;

                    if (myPercent != null) // It's started, get the status of the upload
                    {
                        myPercent = myPercent.firstChild.data;

                        document.getElementById("progressBar").style.width = myPercent + "%";
                        document.getElementById("bytesRead").innerHTML = myBytesRead + " of " + 
                            myContentLength + " bytes read";
                        document.getElementById("percentComplete").innerHTML = myPercent + "%";

                        // Sleep then call the function again
                        window.setTimeout("ajaxFunction();", 100);
                    }
                    else
                    {
                        document.getElementById("bytesRead").style.visibility = "hidden";
                        document.getElementById("progressBar").style.width = "100%";
                        document.getElementById("percentComplete").innerHTML = "Done!";
                    }
                }
            }
            else
            {
                alert(req.statusText);
            }
        }

    }

1 个答案:

答案 0 :(得分:1)

删除这些代码行,然后它就不会显示进度条..

document.getElementById("initializing").style.visibility = "hidden";
document.getElementById("progressBarTable").style.visibility = "visible";
document.getElementById("percentCompleteTable").style.visibility = "visible";
document.getElementById("bytesRead").style.visibility = "visible";

myBytesRead = myBytesRead.firstChild.data;
myContentLength = myContentLength.firstChild.data;

if (myPercent != null) // It's started, get the status of the upload
{
   myPercent = myPercent.firstChild.data;
   document.getElementById("progressBar").style.width = myPercent + "%";
   document.getElementById("bytesRead").innerHTML = myBytesRead + " of " + 
                            myContentLength + " bytes read";
   document.getElementById("percentComplete").innerHTML = myPercent + "%";

   // Sleep then call the function again
   window.setTimeout("ajaxFunction();", 100);
   }
   else
   {
     document.getElementById("bytesRead").style.visibility = "hidden";
     document.getElementById("progressBar").style.width = "100%";
     document.getElementById("percentComplete").innerHTML = "Done!";
   }