清晰表单布局中的 ImageField 预览

Posted 2023-02-24

【中文标题】清晰表单布局中的 ImageField 预览

【英文标题】：ImageField preview in crispy forms layout

【发布时间】：2014-01-31 07:27:53

【问题描述】：

我想显示来自 ImageField 的图像。我正在使用 Django crispy forms。看来我需要使用html 布局助手，但我不确定如何在此处访问模板变量。

以下渲染一个空白图片标签：

HTML('<img src=" logo.url " />')

我是不是引用错了，还是有更好的酥脆形式？

这是完整的代码，您可以更好地了解：

forms.py

class CompanyForm(forms.Form):
    name = forms.CharField(required=False, label="Company name")
    logo = forms.ImageField(required=False, label="Logo")

    # form layout
    helper = FormHelper()
    helper.form_class = 'form-horizontal'
    helper.layout = Layout(
        Div(
            'name',
            HTML('<img src=" logo.url " />'),
            css_class='span4',
        ),

        FormActions(
            Submit('submit', 'Save', css_class="btn-primary pull-right"),
        )
    )

models.py

class Company(models.Model):
    name = models.CharField(max_length=100)
    logo = models.ImageField(upload_to = 'logos/', null=True)

views.py

我在我的视图中设置表单的初始值：

...
profile = Company.objects.get(name="foo")
form = CompanyForm(initial='name': profile.name, 'logo': profile.logo, )

context = 
    'profile_form' : form,


return render_to_response('dashboard/company-profile.html', context_instance=RequestContext(request, context))    

company-profile.html

% load crispy_forms_tags %
<div class="row">
  % crispy profile_form %
</div>

【参考方案1】：

有趣的是，我今天刚刚在一个内联图片上传表单集上处理同样的问题，我最终得到了这个实现：

class ImageModelForm(forms.ModelForm):

    class Meta:
        model = ImageModel

    def __init__(self, *args, **kwargs):
        super(ImageModelForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.form_tag = False
        self.helper.disable_csrf = True
        self.helper.layout = Layout(
            'title',
            'description',
            'imagefile',
            HTML("""% if form.imagefile.value %<img class="img-responsive" src=" MEDIA_URL  form.imagefile.value ">% endif %""", ),
            'flag_featured',
        )

【讨论】：

完美！非常感谢！

一件事是表单提交后，页面加载时img坏了。如果我在页面上点击重新加载，它就会显示得很好。你有这个问题吗？这是因为提交表单后img src是/media/myfile.jpg。在页面重新加载时，它正确地获取为/media/logos/myfile.jpg。是因为当页面从表单提交返回时文件没有完成上传吗？父媒体目录是临时上传位置还是什么？也许我可以获取另一个属性而不是form.imagefile.value？

【参考方案2】：

进一步了解@petkostas 的答案，特别是来自@Banjer 的图像重新加载评论： - 我也遇到了表单的这个问题，并通过在views.py中引入条件语句来解决这个问题（注意，上下文语句不包括在下面）：

if request.method == "POST":
       if form.is_valid():
          #do stuff
       return HttpResponseRedirect(reverse('your_named_url'))
elif request.method =="GET":
       return render(request, 'path/to/template.html', context)

这样做是允许页面在更新后重新加载新内容（因此您可以使用前面提到的 form.imagefile.value 属性）

！这是一个非常具体的用例，但我希望它可以帮助某人节省一些时间

【参考方案3】：

从 2020 年以后看到此问题的人，自 v1.10、v.1.9 或附近版本以来，此问题已得到修复。 我对 v.1.8 也有同样的问题。