django - 在表单中显示图像预览

Question

我想以 django 形式实现以下内容，用于 models.ImageField :

不显示标准<input type="file">按钮(“选择文件”按钮)

显示当前图像的预览，适用于已填充的模型

对于空(新)模型，显示自定义按钮

单击图像预览或自定义按钮将打开一个文件对话框，以从用户的文件系统中选择图像

选择新图像会将自定义按钮或旧图像预览替换为新图像的预览

在我看来，这就像在表单中选择图像的正常工作流程，但我似乎没有找到任何完全有效的解决方案。我能找到的所有内容都涉及到几个部分的黑客攻击:

设置标签样式并隐藏标准的“选择文件”按钮:https://www.youtube.com/watch?v=4p2gTDZKS9Y

使用小部件代替 forms.FileField 的标准.

我曾尝试使用:

class ImagePreviewWidget(Widget):

    def render(self, name, value, attrs=None):
        return mark_safe('<img src="/media/%s" width="100px"/>' % escape(value))

对于小部件，我以如下形式使用它:

class DesignCampaignForm(ModelForm):

    brand_logo = FileField(widget=ImagePreviewWidget)

这正确地显示了现有图像的预览，但我无法点击它来选择另一个文件，即使我是这样也不会更新预览。

对于这个简单的用例，是否已经有可用的解决方案？

Answer 1

我一直无法找到完整的解决方案，所以我做了以下工作:

使用小部件渲染修改后的 ClearableFileInput ，渲染图像和 <input> 元素

使用 CSS 设置元素中的 <input> 样式，将其隐藏

确保单击图像会触发隐藏的 <input> 元素，将 <img> 包装在 <label> 中并使用 for 属性

添加一些 javascript 以在 <input> 元素中的选择更改时替换图像预览

每当清除选择时，显示原始预览

可以在 here 找到要点。

在我的最终解决方案(尚未在要点中)中，我添加了一个用于尚未选择图像时的按钮。

编辑:Gist 仅适用于 1.11.x 版之前的 Django。 class ClearableFileInput 已被删除和更改