2014-10-01 22 views
2

我在我的django項目中使用Dropzone插件。Dropzone在Django

我想單擊按鈕時上傳圖像。這件事情起作用。但問題是我想在所有文件成功上傳到服務器後觸發事件。我嘗試了谷歌搜索的許多解決方案,但沒有任何工作。

這裏是我的代碼: 的Html

<div id="dropzone-div"> 
    <form class = "dropzone" id = "image-form"> 
    {% csrf_token %} 
    <div class="dropzone-previews"></div> 
    <input type = "text" name = "album_Id" id = "album_Id" hidden> 
    <div class="fallback"> 
     <input name="image_file" type="file" multiple="" /> 
    </div> 
    <input type = "reset" id ="resetImageForm" hidden> 
    </form> 
</div> 

<span> 
    <button class="btn btn-success" id = "upload">Upload</button> 
</span> 

JS代碼:

Dropzone.autoDiscover = false; 

var myDropzone = new Dropzone(".dropzone", { 
    url: "{% url 'upload' %}", 
    addRemoveLinks: true, 
    thumbnailWidth: "80", 
    thumbnailHeight: "80", 
    dictCancelUpload: "Cancel", 
    parallelUploads: 100, 
    autoProcessQueue: false 
}); 

myDropzone.on("drop", function (event) { 
    $('.dropzone').animate({ 
    opacity: 1, 
    top: "-5" 
    }); 
}); 

$("#upload").on('click', function() { 
    myDropzone.processQueue(); 
    $.ajax({ 
    type: "POST", 
    url: "{% url 'getPhoto' %}", 
    dataType: "json", 
    async: true, 
    data: { 
     album_Id_1:$("#album_Id").val() 
    }, 
    success: function (json_data) { 
     alert(json_data) 
    } 
    }); 

}); 

views.py代碼:

#module for uploading images 
@csrf_exempt 
def uploadImages(request): 
    try: 
     if request.session['member_id'] is not None: 
      if request.method == "POST": 
       album_Id = request.POST.get('album_Id','') 
       files = request.FILES.getlist('file') 
       for filename in files: 
        save_image = AlbumPhotos(photo=filename, albumPhoto_id=album_Id) 
        save_image.save() 

       data = {'status':'true'} 
       return HttpResponse(json.dumps(data), content_type="application/json") 

    except KeyError: 
     pass 
    return redirect('/') 


#module for counting photos in current album 
@csrf_exempt 
def getPhotoCount(request): 

     if request.session['member_id'] is not None: 
      if request.method == "POST": 
       response = {} 
       album_Id = request.POST.get('album_Id_1','') 
       countPhotos = AlbumPhotos.objects.filter(albumPhoto_id=album_Id).count() 
       print("_______",countPhotos) 
       response['count'] = countPhotos 
       return HttpResponse(json.dumps(response), content_type="application/json") 

    #except KeyError: 
    # pass 
    #return redirect('/') 

的事情是所有的文件是uploa丁成功。但我想要統計上傳的文件數量。爲此,我想在所有文件上傳到服務器時觸發另一個功能。如何解決這個問題。請回答。

+0

可以使另一個請求到一個特殊的端點,從在JavaScript中對「成功」的事件嗎? – michaelb 2014-10-01 14:21:48

+0

我也試過,但該函數內的聲明不起作用。 – 2014-10-03 05:15:45

回答

1

使用變量爲和更新它的每一次成功上傳的文件

var myDropzone = new Dropzone(".dropzone", { 
    [...] // all the other settings 
    uploadedFile: 0, 
    }); 

    myDropzone.on("success", function (event) { 
     this.uploadedFile++; 
    });