django-在Django中选择文件后预览照片

Posted 2023-02-24

【中文标题】django-在Django中选择文件后预览照片

【英文标题】：django-Preview the photo after selecting the file in Django

【发布时间】：2021-07-07 05:13:09

【问题描述】：

models.py

class Banner(models.Model):
    banner_photo = models.ImageField(null=True, blank=True)

作为下面的答案，我想在 django-admin 中保存横幅图像之前预览图像选择。我是 html 的初学者。如何覆盖它？

我想预览要向管理员注册的横幅图片，就像捕获的图像一样。看到答案我也不知道怎么应用。

onchange file input change img src and change image color

【问题讨论】：

我不相信这是Django 的问题。鉴于它的客户端，我认为它更多 HTML 和 JS。

这能回答你的问题吗？ HTML - Display image after selecting filename

@PacketLoss 我想在 django admin 中注册图像时预览，但我知道我在 Google 上搜索时应该使用 HTML 和 JS。但是我对 HTML & JS 不是很了解，所以我问如何将它应用到 django。谢谢你的回答。

修改您希望在其上执行此操作的页面的 html 模板。 realpython.com/customize-django-admin-python/…

【参考方案1】：

我最初在 Github 上发布我的答案：https://github.com/matthewwithanm/django-imagekit/issues/444

但是，我想在这里分享。我认为它可以帮助您和其他人。

所以，回答您的问题：是的，可以在使用 Django 管理应用程序保存之前预览您的图像。

步骤如下：

在包含您要预览的图像的模型中定义一个自定义字段(models.py)：

from django.contrib.admin.decorators import display
from django.db.models import Model
from django.db.models.fields.files import ImageField
from django.template.loader import get_template


class MyModel(Model):
    my_image_field = ImageField()

    # This is our new field. It renders a preview of the image before and post save.
    @display(description='Preview')
    def my_image_thumbnail(self):
        return get_template('my_image_thumbnail_template.html').render(
            'field_name': 'my_image_field',
            'src': self.my_image_field.url if self.my_image_field else None,
        )

在应用的管理配置中提供这个新字段(admin.py)：

from django.contrib import admin

from .models import MyModel

admin.site.register(MyModel, fields=('my_image_thumbnail', 'image'), readonly_fields=('my_image_thumbnail',))

为该新字段定义一个 html 模板(my_image_thumbnail_template.html)：

<!-- This template is reusable, so you don't need to create one for each field that you want a thumbnail -->

<img
  <!--
    If there's no image, for example, when we are adding a new instance,
    we can fill the empty image preview with a placeholder image.
    If want to get this placeholder image URL from your static files,
    must load their URL in the `MyModel.my_image_thumbnail` method.
    Here is a thread that shows how to do it: https://***.com/questions/11721818
  -->
  src="% if src % src % else %http://atrilco.com/wp-content/uploads/2017/11/ef3-placeholder-image.jpg% endif %"
  id="image-thumbnail- field_name "
>

<script>
  // Vainilla javascript ? (Babel defaults, not ie 11, not ie_mob 11)

  // This function adds an event listener over the input image field (`my_field_image`).
  // If the user edits that field, the preview image will be updated.
  function changeThumbnail() 
    const fieldName = " field_name ";
    document
      .getElementById(`id_$fieldName`)
      .addEventListener("change", function (e) 
        const reader = new FileReader();
        reader.onload = function (e) 
          document.getElementById(`image-thumbnail-$fieldName`).src = e.target.result;
        ;
        reader.readAsDataURL(this.files[0]);
      );
  

  // This function executes a callback when the document is ready.
  // https://***.com/questions/9899372
  //
  // Is this required?
  // No, but, in most cases, the image preview is rendered above the input field,
  // as we do in the `admin.py` module.
  // In that case, need to wait for the document to be ready before adding the
  // event listener defined in `changeThumbnail`.
  function docReady(fn) 
    if (document.readyState === "complete" || document.readyState === "interactive") 
      setTimeout(fn, 1);
     else 
      document.addEventListener("DOMContentLoaded", fn);
    
  
   docReady(changeThumbnail);
</script>

结果

没有图像的新模型实例

带有图像的新模型实例

为了好奇：我使用 django-jazzmin（自定义 Django 管理主题）