在Djang中使用AJAX将正在进行的上载状态返回到HTML时遇到的问题

Question

我尝试在Django中实现“上传进度条”。在

以下是我在模板文件中的代码：

    {% extends "index_base.html" %}
    {% block content %}

    <script src="/media/js/functions.js" type="text/javascript"></script>
    <script  src="/media/js/jquery.js" type="text/javascript"> </script>

    <script type="text/javascript">
    var xhrObject1;
    var xhrObject2;

    function createXMLHttpObject()
    {
        var xhrObject;  // The variable that makes Ajax possible!
        try
        {
              xhrObject = new XMLHttpRequest();
        } 
        catch (e)
        {
              try{
                   xhrObject = new ActiveXObject("Msxml2.XMLHTTP");
              } catch (e){
                   try {

                        xhrObject = new ActiveXObject("Microsoft.XMLHTTP");
                   } catch (e) {
                        xhrObject = null;
                   }
              }
         }
         return xhrObject;
    }

    function ajaxFunction()
    {
        xhrObject1 = createXMLHttpObject();
        if (xhrObject1 == null)
        {
            alert("Your browser does not support ajax.");
            return;
        }
        xhrObject1.onreadystatechange = function(){
              if(xhrObject1.readyState == 4){
                    document.getElementById("targetDiv").innerHTML = xhrObject1.responseText;
                    }
        else
            {
                xhrObject2 = createXMLHttpObject();
                xhrObject2.onreadystatechange = function(){
                    if(xhrObject2.readyState == 4){
                            document.getElementById("targetDiv").innerHTML = xhrObject2.responseText;
                    }
                    else
                    {
                        document.getElementById("targetDiv").innerHTML = "getting progress...";
                    }
                }
                xhrObject2.open("GET", "/upload_progress.psp", true);
                xhrObject2.send(null);
            }
            }
           var arrFiles = document.getElementById('id_file');
           var fileToUpload = arrFiles.files[0];
           xhrObject1.open("POST", "/upload.psp/", true);
           xhrObject1.send(fileToUpload);
    }
    function submitForm()
    {
        document.forms["myform"].submit();
        ajaxFunction();
        return false;
    }
    </script>
    <div id="main_container">
    {% include "includes/nav.html"  %}
    <!------- Main Contents  ---------->
        <div id="contents_holder">
            <div id="contents">
                <div id="c_banner">
                        <span class="main_title">Upload File</span>
                    </div>
                <div id="targetDiv" > </div>
                <div id="setting">
                <form name="myform" id="myform" action="/upload.psp/" method="post" enctype="multipart/form-data">
                    <h2>Upload File</h2></br>
                    <p>{{ form.file.label_tag }}&nbsp;&nbsp;{{ form.file }}</p></br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="button" value="Upload" name="uploadButton" onclick="javascript:return submitForm();"/> 
                    &nbsp;&nbsp;<input type="button" value="Cancel" name="cancelUploadButton" onclick ="cancelUploadClicked()"/>
                    <input type="hidden" value="title" name="title" id="title" />
                </form>
                </div>
            </div>
        </div>
    </div> 
    {% endblock %}

下面是我在里面的两个功能视图.py公司名称：

^{pr2}$

我的问题是如何将上载状态返回到 第二个ajax调用（GET方法），以便最终可以更新它 在html中。在

我不知道如何返回正在上传的状态。在

任何帮助都将不胜感激。提前谢谢。在

Answer 1

我最近不得不自己做一些挖掘来找到解决办法。在

退房：

http://fairviewcomputing.com/blog/2008/10/21/ajax-upload-progress-bars-jquery-django-nginx/

我还没有尝试过引用的解决方案，但它看起来足够合理。 它涉及到注册一个自定义文件上载类来公开上载进度信息。在