Как просмотреть изображение перед загрузкой в django

Я пытаюсь просмотреть изображение перед загрузкой его на html-страницу. Я использую django. Вот моя модель

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

    class Meta:
        ordering = ['-date_added']

вот мой form.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-странице, но я хочу, чтобы перед загрузкой я мог видеть изображение, которое я пытаюсь загрузить. Как я могу это сделать?

Если вы пытаетесь загрузить изображение впервые, вы можете использовать createObjectURL, который принимает объект, присутствующий в HTML File upload.

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

Если вы просматриваете изображения, уже присутствующие в моделях Django, то вы должны использовать URL изображения в HTML теге Image.

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

CreateObjectURL : https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

Загрузка файла: https://www.w3schools.com/howto/howto_html_file_upload_button.asp

Вернуться на верх