title: How to add the image to the form.serialize()?
body: <p>There is a form. I'm trying to add an <code>image</code> in the <code>form.serialize</code>, but it does not work. Here is the form itself.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var frm = $('#id_article_form');
  var formData = $('#id_article_form').serializeArray();
  formData.push({ name: "image", value: $('input[type=file]')[0].files[0] });
  
  $.ajax({
    type: frm.attr('method'),
    url: "{% url 'draft_create' %}",
    data: formData
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form action="/knowledge_base/add/" class="edit_form new_event" id="id_article_form" enctype="multipart/form-data" onsubmit="submitArticleForm(event, this)" method="POST"&gt;
        &lt;input type="hidden" name="csrfmiddlewaretoken" value="QR8lN1G9v6qzlJFuYTnwDBO3FYMb1OWsDwMxS0vpwETdv4JKNbG0auYdCGVG9Ain"&gt;
        &lt;div class="content_create"&gt;
          &lt;div class="field inline textarea"&gt;
            &lt;input type="text" name="title" id="id_title" style="width: 400px;" required="" class="wide" maxlength="254"&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="footer_content"&gt;
          &lt;div class="footer_select"&gt;
              &lt;div class="field inline footer_inline select"&gt;
                  &lt;div class="subhead"&gt;Category:&lt;/div&gt;
                  &lt;select name="category" id="id_category" class="select2" required=""&gt;
    &lt;option value="" selected=""&gt;---------&lt;/option&gt;
  
    &lt;option value="2"&gt;Food&lt;/option&gt;
  
    &lt;option value="1"&gt;Sport&lt;/option&gt;
  
  &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="field inline select" id="id_subcategory_div"&gt;
  &lt;div class="subhead"&gt;Subcategory:&lt;/div&gt;
  &lt;select name="subcategory" class="select2" id="id_subcategory"&gt;
    &lt;option value="2"&gt;123&lt;/option&gt;
  
    &lt;option value="1"&gt;321&lt;/option&gt;
  &lt;/select&gt;
              &lt;/div&gt;
            &lt;div class="field inline footer_inline select"&gt;
                  &lt;div class="subhead"&gt;Status&lt;/div&gt;
                  &lt;select name="status" class="select2" id="id_status"&gt;
    &lt;option value="published"&gt;Published&lt;/option&gt;
  
    &lt;option value="not published" selected=""&gt;Not published&lt;/option&gt;
  
  &lt;/select&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;div class="event_photo"&gt;
            &lt;img id="id_image_show" src="blob:http://127.0.0.1:8000/316edc4e-21b6-4fac-981f-8342619b11a3" data-rjs="2" style="display: inline;"&gt;
            &lt;div class="backgroundImage"&gt;
              &lt;span class="flaticon-image"&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="blind_links"&gt;
              &lt;div class="wrapp"&gt;
                &lt;a href="javascript:void(0)" onclick="$('#id_image').click()"&gt;
                  &lt;span class="flaticon-up-arrow-hand-drawn-outline image_upload" style="display: none;"&gt;&lt;/span&gt;
                  &lt;span class="image_upload" style="display: none;"&gt;Upload&lt;/span&gt;
                  &lt;span class="flaticon-two-circling-arrows image_edit" style="display: inline;"&gt;&lt;/span&gt;
                  &lt;span class="image_edit" style="display: inline;"&gt;Edit&lt;/span&gt;
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;input type="file" name="image" style="display: none;" onchange="addArticleImage(event, this);" id="id_image"&gt;
          &lt;/div&gt;
          &lt;div class="center"&gt;
            &lt;button type="submit" class="submit" id="id_submit"&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The image <code>src</code> is written to the <code>&lt;img id="id_image_show" src="" data-rjs="2"&gt;</code>.</p>
  
  <p>The <code>object File</code> comes in the <code>request.POST</code>, but the image cannot be opened.</p>