上传AJAX文件后如何更新页面？

Question

我试图提出一种方法来显示进度条，用于将文件上传到我的网站。 到目前为止，我提出了以下建议：

HTML：

<form action="upload/files.php" method="post" enctype="multipart/form-data" id="frmUpload">
    <input type="file" name="upfile" id="idUpload">
    <input type="text" name="txtV1">
    <input type="text" name="txtV2">
    <input type="submit" value="Add File" name="btnAddFile" id="btnAddNew" onClick="return btnAddClkd();">
</form>
<div>Current Progress: <span id="idPerc"></span></div>

JavaScript：

function btnAddClkd()
{
    var frm_obj = document.getElementById("frmUpload");
    if(frm_obj != undefined)
    {
        var ajaxOK = false;
        if(frm_obj.action)
        {
            try
            {
                var objFrm = document.forms['frmUpload'];
                if(objFrm != undefined)
                {
                    var fd = new FormData(objFrm);
                    var xhr = new XMLHttpRequest();
                    if(xhr != undefined)
                    {
                        xhr.upload.addEventListener("progress", uploadProgress, false);
                        xhr.addEventListener("load", uploadComplete, false);
                        xhr.addEventListener("error", uploadFailed, false);
                        xhr.addEventListener("abort", uploadCanceled, false);
                        xhr.open("POST", frm_obj.action);
                        xhr.send(fd);

                        ajaxOK = true;
                    }
                }
            }
            catch(e)
            {
                ajaxOK = false;
            }
        }

        if(!ajaxOK)
        {
            //Failed to send with ajax, use regular method
            frm_obj.submit();
        }

        return false;
    }

    return true;
}

function uploadProgress(evt)
{
    var objPerc = document.getElementById('idPerc');
    if(objPerc != undefined)
    {
        if(evt.lengthComputable)
        {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            objPerc.innerHTML = percentComplete.toString() + '%';
        }
        else
        {
            objPerc.innerHTML = "-";
        }
    }
}

function uploadComplete(evt)
{
    var objPerc = document.getElementById('idPerc');
    if(objPerc != undefined)
    {
        objPerc.innerHTML = "Done";
    }
}

function uploadFailed(evt)
{
    var objPerc = document.getElementById('idPerc');
    if(objPerc != undefined)
    {
        objPerc.innerHTML = "Failed";
    }
}

function uploadCanceled(evt)
{
    var objPerc = document.getElementById('idPerc');
    if(objPerc != undefined)
    {
        objPerc.innerHTML = "Canceled";
    }
}

当上传大文件时，此概念适用于进度条，但上传完成后，Web服务器（或upload/files.php页面）将结果作为生成的HTML页面返回。 所以我的问题是如何显示HTML？ （当前，我的上传已完成，并且我的消息显示为"Current Progress: Done" 。）

Answer 1

如果要用新内容替换页面的整个正文，则可以执行以下操作：

发送请求之前，请添加此onreadystatechange处理程序。

xhr.onreadystatechange = function() {
    // request finished and response is ready
    if (xhr.readyState == 4)
        document.body.innerhtml(xhr.responseText);
}