Python 自定义Django ClearableFileInput小部件的样式

我在django车型中使用了

ImageField

，以实现图像上传功能

ImageField

使用了

ClearableFileInput

小部件，但它没有提供格式良好的html标记，我可以使用CSS进行自定义。下面显示的是由

ClearableFileInput

呈现的html标记

<div class="form-group" id="div_id">
    <label class="control-label " for="id_image">
        Guide
    </label>

    <div class="controls ">
        Currently:
        <a href="/media/ide.png">de.png</a>
        <input type="checkbox" name="image_" id="image_">
        <label for="image_te">
            Clear
        </label><br>
        Change:
        <input type="file" name="image_te" id="id_i" class="clearablefileinput">
    </div>
</div>

指导
目前：
清楚的


更改：

---

简单地说，我想做的就是向这些元素添加自定义css类，并根据需要更改顺序。如果有人能给我一个解决这个问题的建议，那就太好了

只需创建自己的输入类，并根据需要更改可调用的呈现。作为一个例子，这里有一个我添加了一个小化身。它又快又脏，因为它不干，但它有一个用途：

class AvatarInput(ClearableFileInput):
'''renders the input file as an avatar image, and removes the 'currently' html'''

template_with_initial = u'%(initial)s %(clear_template)s<br />%(input_text)s: %(input)s'

def render(self, name, value, attrs=None):
    substitutions = {
        'input_text': self.input_text,
        'clear_template': '',
        'clear_checkbox_label': self.clear_checkbox_label,
    }
    template = u'%(input)s'
    substitutions['input'] = super(AvatarInput, self).render(name, value, attrs)

    if value and hasattr(value, "url"):
        template = self.template_with_initial
        substitutions['initial'] = (u'<img src="%s" width="60" height="60"></img>'
                                    % (escape(value.url)))
        if not self.is_required:
            checkbox_name = self.clear_checkbox_name(name)
            checkbox_id = self.clear_checkbox_id(checkbox_name)
            substitutions['clear_checkbox_name'] = conditional_escape(checkbox_name)
            substitutions['clear_checkbox_id'] = conditional_escape(checkbox_id)
            substitutions['clear'] = CheckboxInput().render(checkbox_name, False, attrs={'id': checkbox_id})
            substitutions['clear_template'] = self.template_with_clear % substitutions

    return mark_safe(template % substitutions)

类虚拟输入（ClearableFileInput）：
''将输入文件呈现为化身图像，并删除“当前”html''
模板\u的首字母=u%（首字母）s%（清除\u模板）s
%（输入\u文本）s:%（输入）s'
def render（自身、名称、值、属性=无）：
替换={
“输入文本”：self.input\u text，
“清除模板”：“，
“清除复选框标签”：self.clear\u checkbox\u标签，
}
模板=u“%（输入）s”
替换['input']=super（化身输入，自我）。呈现（名称、值、属性）
if值和hasattr（值，“url”）：
template=self.template_，带_首字母
替换['initial']=（u''
%（转义（value.url）））
如果不需要self.u：
复选框名称=自身。清除复选框名称（名称）
checkbox\u id=self.clear\u checkbox\u id（checkbox\u name）
替换['clear_checkbox_name']=条件转义（checkbox_name）
替换['clear\u checkbox\u id']=条件转义（checkbox\u id）
替换['clear']=CheckboxInput（）.render（复选框_name，False，attrs={'id'：复选框_id}）
替换['clear_template']=self.template_与_clear%替换
返回安全标记（模板%替换）

然后将其放入表单类Meta中：

    class Meta:
        model = <your model>
        widgets = {'your-field-name': AvatarInput()

类元：
型号=
widgets={'your-field-name'：AvatarInput（）