我正在構建一個博客系統,允許用戶將圖像添加到他們的博客。如何將圖像添加到django的帖子
當用戶添加圖片時,圖片會自動上傳,這發生在博客發佈之前,那麼我應該如何處理上傳圖片,這些圖片有點像臨時圖片,因爲如果用戶發佈博客,這些圖像將具有該博客的外鍵,並保存到某個文件夾中,但如果用戶放棄博客,則應刪除這些臨時圖像。
問題是如何獲取首次上傳的圖片,當博客被實際發佈時?我應該在哪裏存儲這些臨時圖像?以及如何判斷用戶是否放棄了博客?
我正在構建一個博客系統,允許用戶將圖像添加到他們的博客。如何將圖像添加到django的帖子
當用戶添加圖片時,圖片會自動上傳,這發生在博客發佈之前,那麼我應該如何處理上傳圖片,這些圖片有點像臨時圖片,因爲如果用戶發佈博客,這些圖像將具有該博客的外鍵,並保存到某個文件夾中,但如果用戶放棄博客,則應刪除這些臨時圖像。
問題是如何獲取首次上傳的圖片,當博客被實際發佈時?我應該在哪裏存儲這些臨時圖像?以及如何判斷用戶是否放棄了博客?
我建議如下:
希望它有幫助。
您是否使用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
);
是發佈博客文章與圖像領域的單一形式?如果是這樣,在用戶準備好發佈表單之前不會上傳任何內容,因此您不需要任何臨時圖像。 –
沒有我在ajax上構建博客,並使用jquery-file-upload來上傳圖片 – paynestrike
它就像facebook狀態 – paynestrike