Facing problem in returning the ongoing upload status back to the HTML using AJAX in Django

I am trying to implement "Upload Progress Bar" in Django.

Following is my code in the template file:

    {% 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 %}

Following are my two functions inside views.py:

@condition(etag_func=None)
def upload(request):

    if request.method == 'POST':
        form = UploadFileForm(request.POST, request.FILES)
        if form.is_valid():
        #handle_uploaded_file(request.FILES['file'])
        f = request.FILES['file']
        filename = "/host_lighttpd/var/www/htdocs/satellite/static/Data/" + f.name
        destination = open(filename, 'wb+')
        for chunk in f.chunks():
        destination.write(chunk)
        #yield chunk
        request.session['uploaded'] += chunk
        destination.close()
            return render_to_response('uploadsuccess.html')
    else:
        form = UploadFileForm()
    return render_to_response('upload.html', {'form': form})

def upload_progress(request):
    #uploaded = request.session['uploaded']
    return HttpResponse("Upload progress function...")
    #return HttpResponse(uploaded)

My problem is how can I return the upload status back to the second ajax call (GET method), so that it can be eventually updated inside the html.

I don't know how can I return the ongoing uploading status.

Any help would be appreciated. Thanks in advance.

I recently had to do a bit of digging to find a solution for this myself.

Check out :-

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

I have not tried the solution referenced yet, but it looks reasonable enough. It involves registering a custom file upload class to expose the upload progress information.