python - 在 Django 中使用 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 %}

以下是我在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)

我的问题是如何将上传状态返回给 第二次ajax调用(GET方法)，以便最终更新 在 html 内。

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

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

我最近必须自己进行一些挖掘才能找到解决方案。

查看:-

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

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