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

У меня есть модель image и я хочу, чтобы когда пользователь загружает изображение в поле модели, изображение должно быть показано в форме, чтобы пользователь мог подтвердить загруженное изображение, но я не нашел простого решения для этой задачи. Пожалуйста, подскажите мне, какой хороший и простой способ реализовать эту функциональность.

Пожалуйста, проверьте это или, возможно, это

Этого можно достичь с помощью нескольких строк 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)})

А также проверьте этот фрагмент кода.

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

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