如何在以 django 形式上传后显示图像答案

【问题标题】：how to show image just after uploading in django form如何在以 django 形式上传后显示图像
【发布时间】：2022-09-24 17:21:45
【问题描述】：

我有一个image 的模型，我希望当用户上传模型的图像字段时，图像应该显示在表单中，以便用户可以确认上传的图像，但我没有找到任何简单的解决方案这个任务。请告诉我什么是实现此功能的好方法。

您可以通过 javascript 执行此操作并提供一些代码

标签： django django-models django-forms

【解决方案1】：

CSS：

#display-image{
  width: 400px;
  height: 225px;
  border: 1px solid black;
  background-position: center;
  background-size: cover;
}

html:

<input type="file" id="image-input" accept="image/jpeg, image/png, image/jpg">

<div id="display-image"></div>

js：

const image_input = document.querySelector("#image-input");
image_input.addEventListener("change", function() {
  const reader = new FileReader();
  reader.addEventListener("load", () => {
    const uploaded_image = reader.result;
    document.querySelector("#display-image").style.backgroundImage = `url(${uploaded_image})`;
  });
  reader.readAsDataURL(this.files[0]);
});

当输入图像字段改变时，加载事件被触发。所选图像将被设置为 id 为 display-image.. 的 div 的背景。

【讨论】：

【解决方案2】：

好吧，这可以通过几行 javascript 来实现。

HTML

 <input type="file" accept="image" id="img-input"/>
 <img id="display-img"/>

Javascript

const imgInput = document.querySelector("#img-input")
const displayImg = document.querySelector("#display-img")
displayImg.src = URL.createObjectURL(imgInput.files[0])

或者更实用的方法是在 img 输入上添加事件监听器 ->

const imgInput = document.querySelector("#img-input")
const displayImg = document.querySelector("#display-img")
imgInput.addEventListener('change',(event)=>{
   const imgObject = event.target.files[0]
   displayImg.src = URL.createObjectURL(imgObject)})

并检查此代码 sn-p。

const imgInput = document.querySelector("#img-input")
const displayImg = document.querySelector("#display-img")
imgInput.addEventListener('change',
(event)=>{
   const imgObject = event.target.files[0]
   displayImg.src = URL.createObjectURL(imgObject)})

<input type="file" accept="image" id="img-input"/>
 <img id="display-img"/>

【讨论】：