Django Загрузка изображения из формы и отображение этого изображения без обновления страницы

В своем проекте я пытаюсь создать пост через ajax, предлагая пользователю заполнить форму с типом животного, загрузкой изображения и описанием. Сейчас, когда пользователь заполняет все 3 поля и отправляет сообщение, тип животного и описание отображаются на странице администратора, но файл изображения не отображается, и он также не загружается в файл /images/, как указано в коде моей модели.

class Post(models.Model):
BISON = 'Bison'
WOLF = 'Wolf'
ELK = 'Elk'
BLACKBEAR = 'Black Bear'
GRIZZLY = 'Grizzly Bear'
MOOSE = 'Moose'
MOUNTAINLION = 'Mountain Lion'
COYOTE = 'Coyote'
PRONGHORN = 'Pronghorn'
BIGHORNSHEEP = 'Bighorn Sheep'
BALDEAGLE = 'Bald Eagle'
BOBCAT = 'Bobcat'
REDFOX = 'Red Fox'
TRUMPETERSWAN = 'Trumpeter Swan'
YELLOWBELLIEDMARMOT = 'Yellow-bellied Marmot'
RIVEROTTER = 'River Otter'
LYNX = 'Lynx'
SHREW = 'Shrew'
PIKA = 'Pika'
SQUIRREL = 'Squirrel'
MULEDEER = 'Mule Deer'
SANDHILLCRANE = 'Sandhill Crane'
FLYINGSQUIRREL = 'Flying Squirrel'
UINTAGROUNDSQUIRREL = 'Uinta Ground Squirrel'
MONTANEVOLE = 'Montane Vole'
EASTERNMEADOWVOLE = 'Eastern Meadow Vole'
BUSHYTAILEDWOODRAT = 'Bushy-tailed Woodrat'
CHIPMUNK = 'Chipmunk'
UINTACHIPMUNK = 'Uinta Chipmunk'
WHITETAILEDJACKRABBIT = 'White-tailed Jackrabbit'
BEAVER = 'Beaver'
AMERICANMARTEN = 'American Marten'
MOUNTAINCHICKADEE = 'Mountain Chickadee'
BOREALCHORUSFROG = 'Boreal Chorus Frog'
CUTTHROATTROUT = 'Cutthroat Trout'
GREATHORNEDOWL = 'Great Horned Owl'
SNOWSHOEHARE = 'Snowshoe Hare'
ROCKYMOUNTAINELK = 'Rocky Mountain Elk'
NORTHWESTERNWOLF = 'Northwestern Wolf'
BLACKFOOTEDFERRET = 'Black-footed Ferret'
WOLVERINE = 'Wolverine'
ANIMALS = [
    (BISON, ('Bison')),
    (WOLF, ('Wolf')),
    (ELK, ('Elk')),
    (BLACKBEAR, ('Black Bear')),
    (GRIZZLY, ('Grizzly Bear')),
    (MOOSE, ('Moose')),
    (MOUNTAINLION, ('Mountain Lion')),
    (COYOTE, ('Coyote')),
    (PRONGHORN, ('Pronghorn')),
    (BIGHORNSHEEP, ('Bighorn Sheep')),
    (BALDEAGLE, ('Bald Eagle')),
    (BOBCAT, ('Bobcat')),
    (REDFOX, ('Red Fox')),
    (TRUMPETERSWAN, ('Trumpeter Swan')),
    (YELLOWBELLIEDMARMOT, ('Yellow-bellied Marmot')),
    (RIVEROTTER, ('River Otter')),
    (LYNX, ('Lynx')),
    (SHREW, ('Shrew')),
    (PIKA, ('Pika')),
    (SQUIRREL, ('Squirrel')),
    (MULEDEER, ('Mule Deer')),
    (SANDHILLCRANE, ('Sandhill Crane')),
    (FLYINGSQUIRREL, ('Flying Squirrel')),
    (UINTAGROUNDSQUIRREL, ('Uinta Ground Squirrel')),
    (MONTANEVOLE, ('Montane Vole')),
    (EASTERNMEADOWVOLE, ('Eastern Meadow Vole')),
    (BUSHYTAILEDWOODRAT, ('Bushy-tailed Woodrat')),
    (CHIPMUNK, ('Chipmunk')),
    (UINTACHIPMUNK, ('Uinta Chipmunk')),
    (WHITETAILEDJACKRABBIT, ('White-tailed Jackrabbit')),
    (BEAVER, ('Beaver')),
    (AMERICANMARTEN, ('American Marten')),
    (MOUNTAINCHICKADEE, ('Mountain Chickadee')),
    (BOREALCHORUSFROG, ('Boreal Chorus Frog')),
    (CUTTHROATTROUT, ('Cutthroat Trout')),
    (GREATHORNEDOWL, ('Great Horned Owl')),
    (SNOWSHOEHARE, ('Snowshoe Hare')),
    (ROCKYMOUNTAINELK, ('Rocky Mountain Elk')),
    (NORTHWESTERNWOLF, ('Northwestern Wolf')),
    (BLACKFOOTEDFERRET, ('Black-footed Ferret')),
    (WOLVERINE, ('Wolverine'))
]

animal = models.CharField(max_length=32, choices=ANIMALS, default=BISON)
image = models.ImageField(upload_to='images', null=True, blank=True)
description = models.TextField(null=True, blank=True)

def __str__(self):
    return self.animal

Это представление моей домашней страницы, где пользователь должен заполнить форму и нажать кнопку submit:

def homePage(request):
form = PostForm()
if request.method == 'POST':
    form = PostForm(request.POST, request.FILES)
    if form.is_valid():
        form.save()
        return HttpResponse('')

context = {'form': form}
return render(request, 'home.html', context)

И, наконец, вот код javascript AJAX, который я использую, чтобы иметь возможность отправить эту форму и отправить ее на страницу администратора без обновления страницы:

 <script type="text/javascript">
             $(document).on('submit', '#post-form', function (e) {
                e.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: "{% url 'home' %}",
                    data:
                        {
                            animal: $("#id_animal").val(),
                            image: $("#id_image").val(),
                            description: $("#id_description").val(),
                            csrfmiddlewaretoken: '{{ csrf_token }}',
                        },
                    success: function () {
                        alert("success!")
                    }
                })
            });
        </script>

Я не уверен, но думаю, что проблема в том, что я пытаюсь объявить данные для изображения в разделе data: {...}? Поскольку это файл изображения, то image: $('#id_image').val(), не является правильным?

Где есть наглядные примеры, которые помогут понять, в чем моя проблема:

Домашняя страница после успешной отправки формы

Страница администратора в результате "успешной" отправки

Обратите внимание, что на странице администратора сохранились и "Grizzly Bear" (тип животного), и "Big Borwn Bear" (описание), но файл img пуст. Любая помощь будет очень признательна!!! Спасибо!

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