Django Crispy表单文件上传字段

时间:2013-07-01 19:44:07

标签: django forms templates django-crispy-forms

我认为我正确地构造了我的脆皮形式,但它是渲染为标准的django形式而不是我自定义的酥脆形式:

forms.py:

class MyForm(forms.Form):
    main_image = forms.ImageField()
    second_image = forms.ImageField()

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.layout = Layout(
            Div(SmallFileField('main_image', 'second_image')),
        )

SmallFileField(基于bootstrap):

{% load crispy_forms_field %}

<div id="div_{{ field.auto_id }}" class="control-group{% if form_show_errors%}{% if field.errors %} error{% endif %}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
  {% if field.label %}
      <label for="{{ field.id_for_label }}" class="control-label {% if field.field.required %}requiredField{% endif %}">
          {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
      </label>
  {% endif %}

<div class="controls">
    <div class="fileupload fileupload-new" data-provides="fileupload">
      <div class="fileupload-new thumbnail" style="width: 20px; height: 20px;"><img src="http://www.placehold.it/20x20/EFEFEF/AAAAAA" /></div>
      <div class="fileupload-preview fileupload-exists thumbnail" style="width: 20px; height: 20px;"></div>
      <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" name="{{ field.html_name }}" id="id_{{ field.html_name }}" value="{{ field.value }}" /></span>
      <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
    </div>
    {% include 'bootstrap/layout/help_text_and_errors.html' %}
</div>

form.html

<form action='' enctype='multipart/form-data' method='post'>
{% crispy form %}
<input type="submit" value="{% trans "Submit" %}" class="btn"/>
</form>

PS。这个表格是一个三步形式向导的一步。我很感激你的想法!

0 个答案:

没有答案