django - 使用Ajax的任何图像上传和显示方法?

时间:2011-04-22 21:19:44

标签: jquery ajax django django-forms django-imagekit

在我的django应用程序上,我正在使用ImageKit来调整加载到服务器的图像的大小。

models.py

class Pictures(ImageModel):
    user = models.ForeignKey(User)
    original_image = models.ImageField(upload_to='userpx')

    class IKOptions:
        # This inner class is where we define the ImageKit options for the model
        spec_module = 'userprofile.specs'
        cache_dir = 'modpics'
        image_field = 'original_image'
        save_count_as = 'num_views'
    def __unicode__(self):
        return u'%s' % (self.original_image)

forms.py

class PicturesForm(forms.Form): 
   image = forms.ImageField()

template.html

<img src="{{ p.thumbnail_image.url }}" >

<form action="" method="POST" class="cmxform" enctype="multipart/form-data">
{% csrf_token %}
{{aform.as_p}}
<input type="submit" value="submit" name="picture_button" />        
</form>

views.py

   if 'picture_button' in request.POST:
        aform = PicturesForm(request.POST, request.FILES)
        if aform.is_valid():
            # an UploadedFile object
            a_user = User.objects.get(id=request.user.id)

            #Check if image entry exists 
            try:
                p = Pictures.objects.get(user=request.user.id)

            except Pictures.DoesNotExist: 
                picture = Pictures.objects.create(user = a_user)
                image_file = request.FILES['image']
                picture.original_image.save(image_file.name, image_file)

                #show picture and form
                p = Pictures.objects.get(user=request.user.id)
                aform = PicturesForm()

            else:
                p.delete()
                picture = Pictures.objects.create(user = a_user)
                image_file = request.FILES['image']
                picture.original_image.save(image_file.name, image_file)

                #show image and form
                p = Pictures.objects.get(user=request.user.id)
                aform = PicturesForm()


    else:
        p = Pictures.objects.get(user=request.user.id)
        aform = PicturesForm()

Using some Ajax method如何消除template.html中的提交按钮,以便当用户从他/她的机器中选择图像时,图像会自动上传到服务器,然后显示回服务器?

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

我可能会使用:

http://jquery.malsup.com/form/

使用ajax提交表单,然后使用成功回调将图像加载到dom中。