Question

我正在使用具有照片上传功能的网络应用。我创建了一个ModelForm来收集最少的用户信息和一张照片，当我用HTML function redirect_to($location = NULL) { if($location != NULL) { define('URL', 'http://www.website.com/'); header('Location: ' .URL. $location); exit(); } }呈现它时，允许用户上传图像的字段显示得很好。问题是，表格看起来并不好。

我需要能够手动渲染表单以使其看起来更好。我为此编写了HTML，除了ImageFileField之外，一切看起来都正确。只显示标签，而不是上传按钮，清除文件等复选框

我需要做什么才能让ModelForm中的ImageFileField在我的自定义HTML中正确呈现？我上下查看了Django文档，在这里查看了SO和无法找到有此问题的其他人。非常感谢提前！

forms.py代码段

{{ form.as_p }}

new_item.html代码段

class PostForm(forms.ModelForm):

    class Meta:
        model = Items
        fields = ('title', 'description', 'image_file')

models.py代码段

<form enctype="multipart/form-data" method="post" action="" class="post-form">

    {% csrf_token %}

    {{ form.non_field_errors }}

    <div class="fieldWrapper">
        {{ form.title.errors }}
        <label for="{{ form.title.id_for_label }}">Title:</label><br>
        {{ form.title }}
    </div><br>

    <div class="fieldWrapper">
        {{ form.description.errors }}
        <label for="{{ form.description.id_for_label }}">Description:    </label><br>
        {{ form.description }}
    </div><br>

    <div class="fieldWrapper">
        {{ form.image_field.errors }}
        <label for="{{ form.image_field.id_for_label }}">Image (optional):</label><br>
        {{ form.image_field }}
    </div>

    <button type="submit" class="save btn btn-default">Save</button>

</form>

Answer 1

默认情况下，django ModelForm使用django.forms.ImageField而ClearableInputField使用django.db.ImageField https://docs.djangoproject.com/en/1.9/topics/forms/modelforms/#field-types

而且我相信你的确意味着ClearableFileInput

ClearableFileInput¶ class ClearableFileInput文件上传输入：，如果有，则使用附加的复选框输入来清除字段的值字段不是必需的，并且有初始数据。

如何使用它是通过更改类meta

中的小部件

class PostForm(forms.ModelForm):

    class Meta:
        model = Items
        fields = ('title', 'description', 'image_file')
        widgets = {
            'name': ClearableFileInput(),
        }

Answer 2

我最终使用Chrome工具检查正确呈现（但难看）的页面的HTML源代码，并将其用作自定义构建HTML格式的指南。这是我需要添加到我的HTML表单中以使其正确的方法：

            {% if item.image_file %}
            Currently:
            <a href="{{item.image_file.url}}"> {{item.image_file.url}}</a>
            <input id="image_file-clear_id" name="image_file-clear" type="checkbox" /> <label for="image_file-clear_id">Clear</label><br />Change: <input id="id_image_file" name="image_file" type="file" /></p>
            {% endif %}

            {% if not item.image_file %}
            <input id="id_image_file" name="image_file" type="file" /></p>
            {% endif %}

表单中的Django ClearableInputField不以HTML格式呈现

2 个答案: