Django - 模板中使用的自定义模型表单

Question

我一直在试图弄清楚如何创建一个自定义 html 模板，该模板在提交时将上传到模型表单。到目前为止，我对 Django 比较陌生，我对表单上的 Django Docs 有点困惑。我创建了一个自定义 HTML 模板，它看起来像：

HTML：

 <form role="form" method="post" action="." id="js-upload-form" enctype="multipart/form-data">
   {% csrf_token %} 
       <img  id="image1" src="/media/{{ gallery.logo }}" alt="">
          <input type="file" name="logo" id="logo" multiple>
              <br>
          <input type="submit" value="Register" id="js-upload-submit" >
       </form>

你可以注意到我已经给出了输入 ID = logo。当我点击提交时，我希望将图像上传到我的 ModelForm。

表格：

class UploadFileForm(ModelForm):

    logo = forms.ImageField(required=False)

    class Meta:
        model = Content
        fields = ['logo']

型号：

class Content(models.Model):
    logo = models.ImageField(upload_to=content_file_name, null=True, blank=True)

无论如何，我设计 HTML 模板以将图像提交到模型表单的具体方式是什么？我试图避免使用 { form.as_p } ，例如它不做我想要的定制。

Answer 1

您应该将form 对象发送到模板并调用{{form.logo}} 字段。

查看：

if request.method == 'POST':  # When the form is submitted
    form = UploadFileForm(request.POST)
    if form.is_valid():
         new_content = form.save()
         # After the form.save a new model is created 
         # and the file is uploaded to the desired location
else: 
    form = UploadFileForm()

ctx = {}
ctx['form'] = form

return render_to_response('yourtemplate.html', ctx, context_instance=RequestContext(request))

模板：

 <form role="form" method="post" action="." id="js-upload-form" enctype="multipart/form-data">
 {% csrf_token %} 
   {{form.logo}} 
 </form>

定制：

如果您想自定义输入字段，您应该隐藏表单字段，例如：

 <form role="form" method="post" action="." id="js-upload-form" enctype="multipart/form-data">
   {% csrf_token %} 
   {{form.logo.as_hidden}} # This won't show the input
 </form>

现在要自定义输入，您应该显示自定义输入，并通过 jQuery 或 JavaScript 将自定义输入/按钮绑定到隐藏的表单徽标字段。

例如：

如果你想用自定义按钮触发文件选择，你应该这样做：

# ... Other code
<button class='btn btn-success yourclass' onClick='selectFile'>

<script>
  function selectFile(){
    $('#id_logo').click()
  }
<script>