2013-10-23 27 views
4

我正在構建一個博客系統,允許用戶將圖像添加到他們的博客。如何將圖像添加到django的帖子

當用戶添加圖片時,圖片會自動上傳,這發生在博客發佈之前,那麼我應該如何處理上傳圖片,這些圖片有點像臨時圖片,因爲如果用戶發佈博客,這些圖像將具有該博客的外鍵,並保存到某個文件夾中,但如果用戶放棄博客,則應刪除這些臨時圖像。

問題是如何獲取首次上傳的圖片,當博客被實際發佈時?我應該在哪裏存儲這些臨時圖像?以及如何判斷用戶是否放棄了博客?

+0

是發佈博客文章與圖像領域的單一形式?如果是這樣,在用戶準備好發佈表單之前不會上傳任何內容,因此您不需要任何臨時圖像。 –

+0

沒有我在ajax上構建博客,並使用jquery-file-upload來上傳圖片 – paynestrike

+0

它就像facebook狀態 – paynestrike

回答

5

我建議如下:

  1. 修改Post模型添加一個名爲發表時間字段,它允許NULL。
  2. 使用字段已發佈來確定帖子是否已發佈。如果發佈的字段具有NULL,則發佈將被視爲草稿,否則發佈。
  3. 只要點擊創建帖子按鈕,就創建帖子。這會給你Post對象ID你可以綁定到ModelForm並顯示給用戶進行編輯。因此,當他們添加圖片時,您可以以任何您想要的方式將其上傳並綁定到帖子的ID
  4. 只有當您點擊發布按鈕時,纔會將發佈的更改爲datetime.now()。
  5. 刪除已發佈或草稿的帖子應刪除所有鏈接的資源,如圖像。

希望它有幫助。

3

您是否使用django.contrib.auth模塊登錄和註銷用戶?它有一箇中間件組件,它將當前的User對象附加到request參數中,並與Ajax合作良好。如果用戶當前未登錄,它還提供重定向以登錄頁面。更多信息here。一個可能的解決方案:

views.py:

from django.shortcuts import render_to_response 
from django.http import HttpResponse 
from django.utils import simplejson 
from django.contrib.auth.decorators import login_required 
from filetransfers.api import prepare_upload, serve_file 
from blog.models import BlogEntry 
from blog.forms import BlogEntryForm 

@login_required 
def createBlogEntry(request): 
    return render_to_response('blogEdit.html', { 'form' : BlogEntryForm() }) 

@login_required 
def uploadImage(request): 
    if request.method == 'POST': 
    form = BlogEntryForm(request.POST, request.FILES) 
    if form.is_valid(): 
     newEntry = BlogEntry() 
     newEntry = request.FILES['blogImage'] 
     newEntry.image = request.FILES['file'].name 
     newEntry.user = request.user 

     # delete unsaved previous blog post 
     try: 
      oldEntry = BlogEntry.objects.get(user=request.user,completed=False) 
      oldEntry.delete() 
     except: 
      pass 

     newEntry.save() 
     return HttpResponse(simplejson.dumps({'imageLocation' : '/static/media/blogImgs/%s' % request.FILES['image'].name }), mimetype='application/javascript') 
    return HttpResponse(simplejson.dumps({"error" : 101, "message" : "Big error!"}}), mimetype="application/json") 

@login_required 
def uploadText(request): 
if request.method == 'POST': 
    if form.is_valid(): 
     newEntry = BlogEntry() 
     try: 
      newEntry = BlogEntry.objects.get(user=request.user,completed=False) 
     except: 
      pass 

     newEntry.blogText = request.POST['blogText'] 
        newEntry.completed = True 
     newEntry.save() 
     return HttpResponse(simplejson.dumps({'result' : 'success'}); 
    return HttpResponse(simplejson.dumps({"error" : 102, "message" : "other Big error!"}}), mimetype="application/json") 

第一種方法將顯示頁面,並形成以創建博客條目與他人辦理上傳圖片和文字的2所Ajax調用。圖片上傳完成後,將存儲臨時文件BlogEntry,如果前一個條目尚未完成,則會立即刪除。當文本上傳時,臨時博客條目已完成並保存。

可能有多個臨時博客條目(對於瀏覽器中的多個選項卡 - 比如本網站),可能會設置最大數量的項目。如果沒有使用django.auth.contrib軟件包,應該可以使用會話中間件代替 - 這裏有很多選項。

其餘文件的草圖:
模型。潘岳:

from django.db import models 
from django.contrib.auth.models import User 

class blogEntry(models.Model): 
    user = models.ForeignKey(User) 
    created = models.DateField(auto_now_add = True) 
    completed = models.BooleanField(default = False) 

    blogText = models.TextField() 
    image = models.ImageField(upload_to = 'blogImgs/') 

    def delete(self, *args, **kwargs): 
     # Delete image file also 
     storage, path = self.image.storage, self.image.path 
     super(ImageModel, self).delete(*args, **kwargs) 
     storage.delete(path) 

刪除方法已被重寫的項文件已被刪除後刪除圖像文件。

模板:blogEdit.html

<html><head><title>New Blog Entry</title></head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.fileupload/8.9.0/js/jquery.fileupload.js"></script> 
<style type="text/css"> 
form { float: left; } 
#textForm { 
width: 320px; 
padding: 8px; 
} 
#textForm textarea { 
width: 320px; 
height: 150px; 
margin-bottom: 8px; 
} 
#imageForm { 
width: 100px; 
padding-top: 8px; 
} 
#blogImage { 
width: 120px; 
height: 120px; 
} 
#imageForm input[type=file] { 
margin: 8px 0 8px 0; 
} 
</style> 
</head> 
<body> 
<form id="textForm">{% csrf_token %} 
<textarea id="blogText" name="blogText"></textarea> 
<input type="button" value="upload text" id="textUpload"/> 
<img id="blogImage" src="/static/imgs/holdingImage.png" /> 
    <input id="fileupload" type="file" name="blogImage"> 
</form> 
<script> 
$(function() { 
    $('#fileupload').fileupload({ 
    url: '/ajax/uploadImage/', 
    dataType: 'json', 
    done: function (e, data) { 
     blogImage.attr('src', data.result.imageLocation) 
    } 
    }); 
}); 

$('#textUpload').click(function() { 
    $.ajax({ 
     url: '/ajax/uploadText/', 
     dataType: 'json', 
     data: $('#blogText').val(), 
     done: function(e, data) { 
     if(data.result == 'success') { 
      // display message/redraw edit area with complete blog, etc.. 
     } else if(data.error) { 
      // error handing code 
     } 
     } 
    }); 
}); 
</script> 
</body> 
</html> 

這使用jQuery的文件上傳上傳的文件。

使用Ajax和Django csrf保護可能會有一些問題,請參閱here。可能需要將csrf標記複製到ajax調用中,請參見here。 Ajax完成的jQuery文件上傳回調會將上傳的圖片加載到頁面中,替換持有圖片。

forms.py

from django import forms 

class BlogEntryForm(forms.Form): 
    blogImage = forms.FileField() 
    blogText = forms.TextField() 

urls.py

from django.conf.urls import patterns, include, url 
import blog.views 

urlpatterns = patterns('', 
    url(r'^createEntry/$', 'blog.views.createBlogEntry', name='createBlogEntry'), 
    url(r'^ajax/uploadImage/', 'blog.views.uploadImage'), 
    url(r'^ajax/uploadText/', 'blog.views.uploadText'), 
    ...additional urls for django.contrib.auth 
);