如何AJAX文件上传更新后的页面？ [英] How to update page after AJAX file upload?

问题描述

我试图想出一个办法来显示文件上传进度条到我的网站。到目前为止，我想出了以下内容：

I'm trying to come up with a way to display a progress bar for file uploads to my site. So far I came up with the following:

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的：

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服务器（或上传/ files.php 页）返回其结果作为生成的HTML页面。所以我的问题是如何获得的HTML被显示？ （目前我上传完成后，我的消息显示，。目前进展：完成，仅此而已）

This concept works for the progress bar while a large file is uploading, but when the upload is done, the web server (or upload/files.php page) returns the result as a generated HTML page. So my question is how to get that HTML to be displayed? (Currently my upload finishes and my message shows, "Current Progress: Done" and that's it.)

推荐答案

如果你想在页面的整个机身采用了新的内容替换，那么你可以做：

If you want to replace the entire body of the page with the new content, then you could do:

将此onreadystatechange的处理程序在发送请求之前。

Add this onreadystatechange handler before you send the request.

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

这篇关于如何AJAX文件上传更新后的页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！