创建具有多种输入类型的表单答案

【问题标题】：Creating forms with multiple input types创建具有多种输入类型的表单
【发布时间】：2019-08-23 03:46:16
【问题描述】：

我正在尝试创建一个输入表单字段，它可以接收我们在 Twitter 中看到的文本、图像或视频。

我正在尝试以下方法：

from django import forms
from .models import Tweet

class TweetModelForm(forms.ModelForm):
    content = forms.CharField(label='',
                widget=forms.Textarea(
                        attrs={'placeholder': "Your message",
                            "class": "form-control"}
                    ))

产生

但是，我尝试使用相同的输入框，以便用户可以上传图像、视频、GIF 或在框中输入文本。我不知道如何修改上面的表单域。

编辑：如果无法使用 Django，是否可以使用 HTML5 来完成？

【问题讨论】：

澄清一下，您的意思是要在用户上传图片时显示图片吗？

标签： django html python-3.5

【解决方案1】：

您是否尝试过使用所见即所得插件？ Django Summernote 可能会起作用 https://github.com/summernote/django-summernote

然后您可以在表单中将小部件设置为 SummernoteWidget

【讨论】：

【解决方案2】：

要在Django 表单中添加文件上传，您需要将FileField 添加到您的表单类中。

如下更新您的 forms.py。

from django import forms
from .models import Tweet

class TweetModelForm(forms.ModelForm):
    content = forms.CharField(label='',
                widget=forms.Textarea(
                        attrs={'placeholder': "Your message",
                            "class": "form-control"}
                    ))
    file = forms.FileField(label="Upload file", blank=True)

这将呈现用户可以上传图像和其他文件的单独文件字段。

【讨论】：

此方法可以上传文件，但它不会创建图像立即显示在显示中的 twitter 类型的框。

【解决方案3】：

您应该使用 WYSIWYG 编辑器，例如 Froala Editor

用法

from django import forms
from froala_editor.widgets import FroalaEditor

 class PageForm(forms.ModelForm):
     content = forms.CharField(widget=FroalaEditor)

【讨论】：