Question

我有一个页面，允许用户创建博客文章。我在视图中使用基于类的视图（CreateView）。我有一个帖子模型，其中包含用户将填写的所有字段。我还希望用户将多个图像添加到帖子中。因此，我使用postKey模型的ForeignKey字段创建了一个单独的Image模型。然后，我利用django表单集来允许用户在帖子中最多提交10张图像。到目前为止，它完全可以按需工作。但是，我想让用户更轻松地在前端上传图像。当前有10个图像输入字段，用户需要一个一个地添加每个图像。我当时想利用dropzonejs，因为这非常用户友好。问题是我正在努力地围绕着如何设置它。在dropzone.js文档中，该表单必须具有“ dropzone”类。事实是，我不希望整个表单成为放置区域，因为用户还将在同一页面上输入其他Post表单字段以及图像。当它们仍是其他表单输入字段时，是否可以在页面上创建放置区？

我当时在想我可以在html页面上使用两个表单标签，但是然后我可能需要合并一些javascript，以便我可以通过一个按钮提交两个表单标签？

模型

class Post(models.Model):
    title = models.CharField(max_length=100, blank=True)
    date_posted = models.DateTimeField(default=timezone.now)
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    overview = models.TextField(blank=True, null=True)

class Image(models.Model):
    post = models.ForeignKey(Post, default=None, on_delete=models.CASCADE)
    image = models.ImageField(upload_to=post_directory_path,
                              verbose_name='Image')

表格

class PostCreationForm(forms.ModelForm):

    class Meta:
        model = Post
        fields = [
                'title',
                'overview',
                ]

class PostImagesForm(forms.ModelForm):
    image = forms.ImageField(widget=forms.FileInput(attrs={'multiple': True}))

    class Meta:
        model = Image
        fields = ['image']

ImageFormSet = inlineformset_factory(Post, 
                                    Image, 
                                    form = PostImagesForm, 
                                    extra=10, 
                                    max_num=10, 
                                    can_delete=False)

查看

class PostCreateView(LoginRequiredMixin, CreateView):
    model = Post
    form_class = PostCreationForm

    def get_context_data(self, **kwargs):
        context = super(PostCreateView, self).get_context_data(**kwargs)
        if self.request.POST:
            context['images'] = ImageFormSet(self.request.POST, self.request.FILES)
        else:
            context['images'] = ImageFormSet()
        return context

    def form_valid(self, form):
        data = self.get_context_data()
        formset = data['images']

        if formset.is_valid():
            form.instance.author = self.request.user
            self.object = form.save()
            formset.instance = self.object
            formset.save()
            return redirect(self.object.get_absolute_url())
        return super(ProfileCreateView, self).form_valid(form)

模板

{% extends "blog/base.html"%}
{% load crispy_forms_tags %}
{% load static %}
{% block content %}
<div class="content-section">
  <form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <fieldset class="form-group">
      <legend class="border-bottom mb-4">Post</legend>
      {{ form|crispy }}
      {{ form.errors }}
      {{ form.media }}

      <div class="container">
      {{ images.management_form }}
      {% for form in images %}
        <div class="link-formset mb-4">
          {% if form.instance.pk %}{{ form.DELETE }}{% endif %}
          {{ form.image }}
        </div>
      {% endfor %}
      </div>

    </fieldset>
    <div class="form-group">
      <button class="btn btn-outline-info" type="submit">Post</button>
    </div>
  </form>
</div>
{% endblock content %}

因此，目前我有10个图像输入字段，需要分别添加图像。这项工作和图像按预期方式保存在一起，但是显然不是最理想的形式。我想为表单中的图像实现一个dropzone。到目前为止，我仅设法将整个表单转换为一个放置区。谢谢

将dropzone.js与Django表单集集成

0 个答案: