Django clean image作物上传器问题

我正在写一个简单的博客网站，我想让用户上传并裁剪一张图片，将其用作他们的帖子横幅。 我一直在尝试实现干净的图像作物上传。因为我使用的是Django 1.6，所以我不得不稍微修改一下提供的示例，但我成功地让它完美地工作。然而，我似乎无法在我的项目中实现它

我的上传框似乎重复了按钮。此外，一旦上传图像，就会出现3-4个裁剪区域，而不是一个。一个是随机预览区域

这是我的文章模型

class Article(models.Model):
'''Article Model'''

image = models.ImageField(
    verbose_name="image",
    null=True,
    blank=True,
    upload_to='/ajax_uploads/',
    max_length=300
)

title = models.CharField(
    verbose_name = _(u'Title'),
    help_text = _(u' '),
    max_length = 255
)
slug = models.SlugField(
    verbose_name = _(u'Slug'),
    help_text = _(u'Uri identifier.'),
    max_length = 255
)
content_markdown = models.TextField(
    verbose_name = _(u'Content (Markup)'),
    help_text = _(u' '),
)
content_markup = models.TextField(
    verbose_name = _(u'Content (Markup)'),
    help_text = _(u' '),
)
categories = models.ManyToManyField(
    Category,
    verbose_name = _(u'Categories'),
    help_text = _(u' '),
    null = True,
    blank = True
)
date_publish = models.DateTimeField(
    verbose_name = _(u'Publish Date'),
    help_text = _(u' ')
)

class Meta:
    app_label = _(u'blog')
    verbose_name = _(u'Article')
    verbose_name_plural = (u'Articles')
    ordering = ['-date_publish']

def save(self):
    self.content_markup = markdown(self.content_markdown, ['codehilite'])
    super(Article, self).save()

def __unicode__(self):
        return '%s' % (self.title,)


class ImageCrop(forms.ModelForm):
class Meta:
    model = Article
    cicuOptions = {
        'ratioWidth': '', #if image need to have fix-width ratio
        'ratioHeight':'', #if image need to have fix-height ratio
        'sizeWarning': 'False', #if True the crop selection have to respect minimal ratio size defined above.
    }
    widgets = {
        'content_markdown' : PagedownWidget(),
        'image': CicuUploderInput(options=cicuOptions)
    }
    exclude = ['content_markup',]

视图：

模板：

{% block meta %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="{% static "cicu/css/bootstrap.css" %}" rel="stylesheet" type="text/css"/>
<script src="{% static "cicu/js/bootstrap.js" %}"></script>
{{ form.media }}
<title>CICU Image Crop ajax Uploader</title>
{% endblock %}

{% block content %}
<form id="testFormCicu" action="" method="POST">
    {% csrf_token %}
    {{ form.as_table }}
    <input id="submit" type="submit" value="Submit">
</form>
{% endblock %}

---

因为400号问题是另一个问题，我将回答我自己的问题

---

似乎我处理响应设计的js文件复制了我的图像裁剪字段。

万一有人想知道。。。在示例中将UPLOAD_添加到projects settings文件到my settings文件中，似乎会使系统感到困惑。它两次将该文件上传到不同的目录，并拒绝裁剪其中任何一个。早上4:30在这里，我真该去睡觉了！

{% block meta %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="{% static "cicu/css/bootstrap.css" %}" rel="stylesheet" type="text/css"/>
<script src="{% static "cicu/js/bootstrap.js" %}"></script>
{{ form.media }}
<title>CICU Image Crop ajax Uploader</title>
{% endblock %}

{% block content %}
<form id="testFormCicu" action="" method="POST">
    {% csrf_token %}
    {{ form.as_table }}
    <input id="submit" type="submit" value="Submit">
</form>
{% endblock %}

Failed to load resource: the server responded with a status of 400 (BAD REQUEST)