Question

我希望以django形式为models.ImageField：

实现以下目标

不显示标准<input type="file">按钮（＆＃34;选择文件＆＃34;按钮）
显示当前图像的预览，适用于已填充的模型
表示空（新）模型，显示自定义按钮
点击图片预览或自定义按钮将打开文件对话框，从用户的文件系统中选择图片
选择新图像会将自定义按钮或旧图像预览替换为新图像的预览

在我看来，这似乎是一种在表单中选择图像的正常工作流程，但我似乎找不到任何完全有效的解决方案。我所能找到的只涉及到几个部分：

设置标签样式并隐藏标准＆＃34;选择文件＆＃34;按钮：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>元素中的选项发生变化
每当清除选择时，显示原始预览

可以找到一个要点here。

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

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

以表格显示图像预览

1 个答案: