如何在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']

这是我的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页面中上传并显示图片，但是我想在上传之前能够看到我要上传的图片。我该怎么做？

- newbieperson

---

对于这个功能，您只能在模板中使用前端工具（如js）。参考链接：https://dev59.com/VW855IYBdhLWcg3wPBtx - Leyla Krz

那不起作用是因为它在输入框中使用了"onchanging"，但是我的{{form.image}}已经在上传图片了。 - newbieperson

Answer 1

如果您是第一次尝试上传图片，可以使用createObjectURL函数，该函数接受HTML文件上传中的对象。

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

如果您要预览Django模型中已有的图像，则必须在Image HTML标记中使用图像的URL。

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

CreateObjectURL: https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL 文件上传: https://www.w3schools.com/howto/howto_html_file_upload_button.asp

- B.Anup

---

CreatObjectURL只有在我这样做时才有效： <input accept="image/*" type="file" id="files" /> <img id="image" /> <script> document.getElementById('files').onchange = function () { var src = URL.createObjectURL(this.files[0]) document.getElementById('image').src = src }
</script> 但是，我无法保存那些数据。 - newbieperson

尝试一下这个，https://dev59.com/AmEh5IYBdhLWcg3wvFjY - B.Anup

仍然无法工作 - newbieperson