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);
}

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

1 个答案: