2011-02-24 7 views
1

Djangoで "Upload Progress Bar"を実装しようとしています。続きDjangoのAJAXを使用して進行中のアップロードステータスをHTMLに戻す際に直面する問題

は、テンプレート・ファイル内の私のコードです:後

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

私の問題は、私は戻っへのアップロードのステータスを返すことができる方法です 2番目のajax呼び出し(GETメソッド)。最終的にhtml内の に更新されます。

進行中のアップロードステータスを返す方法がわかりません。

ご協力いただければ幸いです。前もって感謝します。

答えて

2

最近、自分自身で解決策を見つけるために少し掘り下げなければなりませんでした。

チェックアウト: -

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

は、私はまだ、参照解決策を試していないが、それは十分に合理的に見えます。 アップロードの進捗情報を公開するカスタムファイルアップロードクラスの登録が必要です。