django - 如何在 Django 中上传之前预览图像

Question

我正在尝试在将图像上传到 html 页面之前预览图像。我正在使用 Django。这是我的模型

class Product(models.Model):
    
    image = models.ImageField(upload_to='uploads/')
    thumbnail = models.ImageField(upload_to='uploads/')

    class Meta:
        ordering = ['-date_added']

这是我的表单.py

class ProductForm(ModelForm):
    class Meta:
        model = Product
        fields = ['image']

这是我的html页面

<form method="post" action="." enctype="multipart/form-data">
                        {% csrf_token %}
                
                        {{ form.non_field_errors }}
                        
                        
                        <div class="fieldWrapper">
                            {{ form.image.errors }}
                            <br>
                            <label for="{{ form.image.id_for_label }}"><br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Image: &nbsp;</label>
                            {{ form.image }}
                       </div>
                       <div class="field">
                            <div class="control" style="margin-bottom: 3%">
                                <button class="btn btn-theme" style="float:right;">SUBMIT</button>
                            </div>
                       </div>
                       </form>

我能够上传并在 html 页面中显示图像，但我想要它以便在我上传之前我可以看到我正在尝试上传的图像。我该怎么做？

Answer 1

如果您是第一次尝试上传图像，您可以使用 createObjectURL，它获取 HTML 文件上传中存在的对象。

<Image id="imagePreviewOne" thumbnail src="URL.createObjectURL(--get image object using selector--)"/>

如果您正在预览 Django 模型中已经存在的图像，那么您必须在图像 HTML 标记中使用图像的 URL。

<Image id="imagePreviewTwo" thumbnail src="URL to image present in django models" />

创建对象网址:https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

文件上传:https://www.w3schools.com/howto/howto_html_file_upload_button.asp