При загрузке нескольких изображений сохраняется только одно изображение.

Question

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

Каждая из 3 фотографий активируется по клику, вызывая onclick="_upload()", и при сохранении страницы фотографии должны отображаться в соответствующих местах (image, image_two и image_three).

Но при сохранении страницы последняя выбранная фотография отображается в слоте image_three.

Даже если я выберу фотографию, нажав image (первое изображение), она отобразится и сохранится в image_three, оставив два других изображения в качестве фотографий по умолчанию.

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

Я что-то упустил? Другой вопрос намекал на необходимость Image класса как ForeignKey до Profile, но зачем это нужно?

обновить форму изображения

<form method="POST" enctype="multipart/form-data">
          {% csrf_token %}

          <input type="file" name='image' accept="image/*"
           id="id_image">
            <a href="#">
              <img src="{{ user.profile.image.url }}" 
               onclick="_upload()">
            </a>

          <input type="file" name='image_two' accept="image/*" 
           id="id_image_two">
            <a href="#">
              <img src="{{ user.profile.image_two.url }}" 
               onclick="_upload()">
            </a>

          <input type="file" name='image_three' accept="image/*"
           id="id_image_three">
            <a href="#">
              <img src="{{ user.profile.image_three.url }}"
               onclick="_upload()">
            </a>
          <button type="submit" value="submit">
            Update Profile</button>
        </form>

<script>
function _upload(){
  document.getElementById('id_image').click();
}
function _upload(){
  document.getElementById('id_image_two').click();
}
function _upload(){
  document.getElementById('id_image_three').click();
}
</script>

модель профиля

image           = models.ImageField(default='default.png', upload_to='profile_pics')
image_two       = models.ImageField(default='default.png', upload_to='profile_pics')
image_three     = models.ImageField(default='default.png', upload_to='profile_pics')


def __str__(self):
    return f'{self.user.username} Profile'

def save(self, *args, **kwargs):
    super().save(*args, **kwargs)

    img = Image.open(self.image.path)

    if img.height > 300 or img.width > 300:
        output_size = (300, 300)
        img.thumbnail(output_size)
        img.save(self.image.path)

Answer 1

<script>
function _upload(){
  document.getElementById('id_image').click();
}
function _upload(){
  document.getElementById('id_image_two').click();
}
function _upload(){
  document.getElementById('id_image_three').click();
}
</script>

Вы определили одну и ту же функцию три раза под одним и тем же именем.

Чтобы исправить это, добавьте аргумент в вашу функцию:

<form method="POST" enctype="multipart/form-data">
          {% csrf_token %}

          <input type="file" name='image' accept="image/*"
           id="id_image">
            <a href="#">
              <img src="{{ user.profile.image.url }}" 
               onclick="_upload('id_image')"> <!-- ← this is where the magic happens -->
            </a>

          <input type="file" name='image_two' accept="image/*" 
           id="id_image_two">
            <a href="#">
              <img src="{{ user.profile.image_two.url }}" 
               onclick="_upload('id_image_two')"> <!-- ← this is where the magic happens -->
            </a>

          <input type="file" name='image_three' accept="image/*"
           id="id_image_three">
            <a href="#">
              <img src="{{ user.profile.image_three.url }}"
               onclick="_upload('id_image_three')"> <!-- ← this is where the magic happens -->
            </a>
          <button type="submit" value="submit">
            Update Profile</button>
        </form>

<script>
function _upload(eltId){
  document.getElementById(eltId).click();
}
</script>