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

Question

我的模型中有一個forms.ImageField叫做Post 。 創建它的實例時，我通過Ajax進行操作，同時將數據data=$(this).serialize()序列化數據發布到我的PostCreateAPIView ，后者是Django REST Framework的通用API CreateView，但是此方法僅序列化數據並忽略了我的形象。

這是我的代碼：

我的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：FormData.constructor的參數1未實現接口HTMLFormElement

Answer 1

感謝Luca，這是答案：

$(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);
        }
    });

 });