如何以Django表格上传后显示图像

Question

我有一个image的模型，我希望当用户上传模型的图像字段时，图像应以表单显示，以便用户可以确认上传的映像，但我找不到任何容易完成此任务的解决方案。 请告诉我什么是实施此功能的好方法。

Answer 1

好吧，这可以通过几行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输入 - ＆gt; 上添加事件列表

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)})

，还检查此代码段。

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"/>

Answer 2

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显示图像的DIV的背景。