让Django ModelForm的ImageFiled显示为缩略图

默认情况下，django的ModelForm显示的是图片的路径，其实并不友好。那么现在来修改一下，让它显示为一张缩略图：

在此之前，先打开源文件中的 widgets.py （site-packages/django/forms/widgets.py）看一下：

class ClearableFileInput(FileInput):
    clear_checkbox_label = _('Clear')
    initial_text = _('Currently')
    input_text = _('Change')
    template_name = 'django/forms/widgets/clearable_file_input.html'

看template_name的值，打开看一下:

{% if widget.is_initial %}{{ widget.initial_text }}: <a href="{{ widget.value.url }}">{{ widget.value }}</a>{% if not widget.required %}
<input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}">
<label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>{% endif %}<br>
{{ widget.input_text }}:{% endif %}
<input type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>

好像看不太懂，但又能看懂一部分，能看出来这就是imagefiled 的html代码，现在将内容拷贝一下，创建一个自己的widgets, 在template文件夹中创建widget文件夹并在其中创建文件 ImageField.html， 将内容拷贝进去，并依葫芦画瓢改一下：

{% if widget.is_initial %}{{ widget.initial_text }}: <img src="{{ widget.value.url }}" width="100" height="50"/>{% if not widget.required %}
<input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}" lay-skin="primary">
<label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>{% endif %}<br>
{{ widget.input_text }}:{% endif %}
<input type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>

在应用中创建文件 ImageWidget.py 文件（可以放在应用中的任何包中）

from django.forms.widgets import ClearableFileInput


class ImageWidget(ClearableFileInput):
    template_name = 'widget/ImageField.html'
    tempate_with_clear = ''

继承ClearableFileInput, template_name 改成刚创建的html模版.

在model form中使用：

class NodesForm(ModelForm):
    class Meta:
        model = Nodes
        exclude = ('site','order_num', 'node_path', 'node_level', 'node_group')
        # 如果有很多image字段，可以这样
        widgets_fields_dict = {k: ImageWidget for k in ("picture", "face_picture", "icon", 'icon_sel', "image1", 'image2', 'image3', 'image4')}
        widgets = widgets_fields_dict

下面看看效果：