javascript - 如何将图像添加到 form.serialize()？

Question

有一个表格。我正在尝试添加 image在form.serialize , 但它不起作用。这是表格本身。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/knowledge_base/add/" class="edit_form new_event" id="id_article_form" enctype="multipart/form-data" onsubmit="submitArticleForm(event, this)" method="POST">
      <input type="hidden" name="csrfmiddlewaretoken" value="QR8lN1G9v6qzlJFuYTnwDBO3FYMb1OWsDwMxS0vpwETdv4JKNbG0auYdCGVG9Ain">
      <div class="content_create">
        <div class="field inline textarea">
          <input type="text" name="title" id="id_title" style="width: 400px;" required="" class="wide" maxlength="254">
        </div>
</div>

        </div>
      </div>
      <div class="footer_content">
        <div class="footer_select">
            <div class="field inline footer_inline select">
                <div class="subhead">Category:</div>
                <select name="category" id="id_category" class="select2" required="">
  <option value="" selected="">---------</option>

  <option value="2">Food</option>

  <option value="1">Sport</option>

</select>
            </div>
            <div class="field inline select" id="id_subcategory_div">
<div class="subhead">Subcategory:</div>
<select name="subcategory" class="select2" id="id_subcategory">
  <option value="2">123</option>

  <option value="1">321</option>
</select>
            </div>
          <div class="field inline footer_inline select">
                <div class="subhead">Status</div>
                <select name="status" class="select2" id="id_status">
  <option value="published">Published</option>

  <option value="not published" selected="">Not published</option>

</select>
            </div>
          </div>

        <div class="event_photo">
          <img id="id_image_show" src="blob:http://127.0.0.1:8000/316edc4e-21b6-4fac-981f-8342619b11a3" data-rjs="2" style="display: inline;">
          <div class="backgroundImage">
            <span class="flaticon-image"></span>
          </div>
          <div class="blind_links">
            <div class="wrapp">
              <a href="javascript:void(0)" onclick="$('#id_image').click()">
                <span class="flaticon-up-arrow-hand-drawn-outline image_upload" style="display: none;"></span>
                <span class="image_upload" style="display: none;">Upload</span>
                <span class="flaticon-two-circling-arrows image_edit" style="display: inline;"></span>
                <span class="image_edit" style="display: inline;">Edit</span>
              </a>
            </div>
          </div>
          <input type="file" name="image" style="display: none;" onchange="addArticleImage(event, this);" id="id_image">
        </div>
        <div class="center">
          <button type="submit" class="submit" id="id_submit">Submit</button>
        </div>
      </div>
      </form>

图片src写入了 <img id="id_image_show" src="" data-rjs="2"> .

object File出现在 request.POST , 但是图片打不开。

Answer 1

我相信你需要使用 FormData对象而不是序列化表单。

var frm = $('#id_article_form');
var formData = new FormData(frm[0]);
formData.append('file', $('input[type=file]')[0].files[0]);

$.ajax({
    type: frm.attr('method'),
    url: "{% url 'draft_create' %}",
    data: formData,
    processData: false,
    contentType: false
});

将 processData 设置为 false 可以防止 jQuery 自动将数据转换为查询字符串。参见 the docs了解更多信息。

必须将 contentType 设置为 false，否则 jQuery will set it incorrectly .