Сериализация (форма) в Ajax с помощью ImageField

У меня есть forms.ImageField в моей модели под названием Post. Когда я создаю его экземпляр, я делаю это через Ajax, одновременно отправляя сериализованные данные с помощью data=$(this).serialize() на свой PostCreateAPIView, который является универсальным API CreateView для Django REST Framework, но этот метод сериализует только данные и игнорирует мое изображение.

Вот мой код:

Мой CreateAPIView:

class PostCreateAPIView(generics.CreateAPIView):
    serializer_class    = PostModelCreateSerializer     
    permission_classes  = [permissions.IsAuthenticated] 
    def perform_create(self, serializer):               
        print(self)
        serializer.save(user = self.request.user)

Моя форма:

class PostModelCreateForm(forms.ModelForm):

    content = forms.CharField(
                    label = "",
                    help_text = "",#text to help
                    widget=forms.Textarea( attrs = {
                    'cols'          : "50", #size
                    'rows'          : "6", #size
                    'placeholder'   : 'Votre publication', 
                    'style'         : 'resize : none' 
                    }))

    group = forms.ChoiceField(choices=USER_GROUPS, label='')

    class Meta:
        model   = Post #we define the model
        fields  = [
        "content",
        "group",
        "photo"
        ]

$(document.body).on("submit", ".post_form_class",function(event){
      event.preventDefault();
      this_ = $(this);
      var formData  = this_.serialize();
      $.ajax({
         method   : "POST",
         url      : createPostUrl,
         data     : formData,
         success  : function(data){
           
         },
         error    : function(data){
           
         }
       });

  });

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id = 'post-form' class = "post_form_class" method = "POST" action = "" enctype = "multipart/form-data">
  <input type='hidden' name='csrfmiddlewaretoken' value='6bgEU7jPVxXskBGJzP7KzSj9mz75k2dpSqG9Fn1kfghUeWQPTKCbm8JJc5za0ecl' />
  <p></p>        

<div id = "div_id_content" class = "form-group"> <div class = "controls "> <textarea name = "content" cols = "50" rows = "6" placeholder = "Votre publication" style = "resize : none" class = "textarea form-control" required id = "id_content">
</textarea> </div> </div> <div id = "div_id_group" class = "form-group"> <label for = "id_group" class = "control-label  requiredField">
                Group<span class = "asteriskField">*</span> </label> <div class = "controls "> <select name = "group" class = "select form-control" id = "id_group"> <option value = "1" selected>Département juridique</option> <option value = "2">Département ingénieurs</option> <option value = "3">Département Commerce</option> <option value = "4">Nouveau</option>

</select> </div> </div> <div id = "div_id_photo" class = "form-group"> <label for = "id_photo" class = "control-label ">
                Photo
            </label> <div class = "controls "> <input type = "file" name = "photo" class = "clearablefileinput" id = "id_photo" /> </div> </div>

    <div class = "row">

      <div class='col-sm-2 '>
        <input class = "btn btn-primary submit_form" id = "submit_form" type = "submit" value = "Publier"/>
      </div>

      <div class='col-sm-1 col-sm-offset-8 '>
        <span class='post-chars-left' > </span>
      </div>

    </div>

</form>

Примечание: Я пробовал formData = new FormData(this_);, но получаю такую ошибку:

TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement

Если вы хотите использовать FormData API, используйте его с HTMLElements, а не с элементами jQuery.

— 06.07.2018 22:45

Сэр, если this_ не является HTMLElement, что это такое? когда я console.info(this_), я получаю элемент HTML

— 06.07.2018 22:48

Нет вы не будете. this_.get(0) - это HTMLElement, this_ - это, как я уже писал, элемент jQuery.

— 06.07.2018 22:49

Попробуйте FormData (это). Тем не менее ... если вы не отправляете файлы, serialize() будет создавать данные в той же форме.

— 06.07.2018 22:50

ваши решения дали эту ошибку> TypeError: 'append' вызывается для объекта, который не реализует интерфейс FormData

— 06.07.2018 22:52

javascript ajax django django-rest-framework

06.07.2018 22:43

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

228

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Спасибо Луке, вот и ответ:

$(document.body).on("submit", ".post_form_class",function(event){
    event.preventDefault();

    var formData  = new FormData(this);
    $.ajax({
        method   : "POST",
        url      : createPostUrl,
        data     : formData,
        processData:false,
        contentType:false,
        success  : function(data){
        location.reload(true); 
        },
        error    : function(data){
            console.info("ERROR:CH0x2 while fetching after creation form submit");
            console.info("data :",data.status, data.statusText);
        }
    });

 });

07.07.2018 12:45

Другие вопросы по теме

Django: загрузка файлов с помощью AJAX: форма сообщает, что поле ввода файла пустое (или токен CSRF отсутствует или неверен)

Node, express - прослушивать перезагрузку удаленного браузера

После того, как кнопка отправки не может отображаться в модальном окне в течение 10 секунд, прежде чем перейти на другую страницу

Вызовы Safari AJAX теряют сеанс / файлы cookie в инкогнито?

Как присвоить значение в переменной js переменной php

IFrame в приложении для Android не разрешает сетевые запросы

Какой правильный способ перебрать массив и отправить несколько запросов ajax

Ошибка Laravel 419 при использовании Ajax

Как обнаружить объект JSON?

Автоматическое изменение размера div после завершения вызова содержимого ajax

Сериализация (форма) в Ajax с помощью ImageField

Ответы 1

Другие вопросы по теме

Похожие вопросы