使用 ImageField 在 Ajax 中序列化（表单）答案

【问题标题】：Serialize (form) in Ajax with ImageField使用 ImageField 在 Ajax 中序列化（表单）
【发布时间】：2018-07-06 20:43:34
【问题描述】：

我的模型中有一个forms.ImageField，名为Post。当我创建它的实例时，我通过 Ajax 执行此操作，同时将带有data=$(this).serialize() 的序列化数据发布到我的PostCreateAPIView，这是 Django REST 框架的通用 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

【问题讨论】：

如果您想使用 FormData API，请将其与 HTMLElements 一起使用，而不是与 jQuery 元素一起使用
先生，如果 this_ 不是 HTMLElement 它是什么？当我console.log(this_) 我得到一个 HTML 元素
不，你不会。 this_.get(0) 是一个 HTMLElement，this_ 正如我所写的，是一个 jQuery 元素
试试 FormData(this)。也就是说...如果您不发送文件，那么serialize() 将产生相同的格式编码数据
你的解决方案给出了这个错误>TypeError: 'append' called on an object that does not implement interface FormData

标签： javascript ajax django django-rest-framework

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

 });

【讨论】：