使用ImageField在Ajax中序列化（窗体）

Question

I have a forms.ImageField in my model called Post . When I create an instance of it, I do it via Ajax, while posting serialized data with data=$(this).serialize() to my PostCreateAPIView , which is a generic API CreateView of Django REST Framework, but this method serializes data only and ignores my image.

Here's my code:

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

My Form:

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> 

NB: I've tried formData = new FormData(this_); but I get this error:

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

Answer 1

Thanks to Luca, here is the answer:

$(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.log("ERROR:CH0x2 while fetching after creation form submit");
            console.log("data :",data.status, data.statusText);
        }
    });

 });