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 =标识。当我点击提交时，我想这将图像上传到我的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> 

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

如：

如果要触发该文件与自定义按钮来选择，你应该做的：

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

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