以表格显示图像预览

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属性
• 每当<input>元素中的选择发生变化时，添加一些javascript来替换图像预览
• 每当清除选择时，显示原始预览

一个要点可以找到here。

在我的最终解决方案中（还没有在主旨中），我添加了一个按钮，用于何时尚未选择图像。

编辑：Gist仅适用于版本1.11.x之前的Django。 从那时起，class ClearableFileInput就被摧毁了