Question

我想使用jquery在django中发布一个表单。我希望我的表单也可以发布文件。正如我所读到的那样使用form.serialize（）不会传递文件字段的内容。所以我读到了FormData。但是当我使用FormData时，我的django视图将不会将其识别为ajax请求。我的代码（使用序列化）

$.ajax({
    url:'/customer/create/',
    type: form.attr('method'),
    contentType:'application/x-www-form-urlencoded;charset=utf-8',                    
    dataType:'json',
    data:form.serialize(),
    success:onSuccess,
    error: function(xhr, ajaxOptions, thrownError){
        alert(thrownError + '\n' + xhr.status + '\n' + ajaxOptions);
    }
});

并使用表单数据

fd = new FormData(form)
$.ajax({
    url:'/customer/create/',
    type: form.attr('method'),
    contentType:'multipart/form-data',                    
    dataType:'json',
    data:fd,
    success:onSuccess,
    error: function(xhr, ajaxOptions, thrownError){
        alert(thrownError + '\n' + xhr.status + '\n' + ajaxOptions);
    }
});

我在这里错过了什么吗？我不确定这必须是正确的contentType。此外，mutipart / form-data在表单的enctype属性中设置。

我也知道jquery-forms，但不想使用它。我只希望这种情况发生在我的一种形式，所以我不想在我的页面中加载它。我想在去那儿之前看看是否有解决方案。

Answer 1

我需要做这样的事情：

$('#cover_url_file_input').on('change', function(e) {

      var file, imgData;
      file = this.files[0];

      if (file) {

        imgData = new FormData();
        imgData.append('cover_url', file);

        $.ajax({
          type: 'POST',
          url: $('#cover-form').attr('action'),
          data: imgData,
          processData: false,
          contentType: false,
          cache: false,

          success: function(result) {
            if (result.info === 'OK') {
              console.log('OK');
            }
          }

        });

      }
});

Answer 2

使用FormData时，需要将processData: false添加到jQuery.ajax选项中，以便jQuery不会尝试处理它无法处理的内容。所以这样做，你应该没问题：

var form = $('#theForm'),
    fd = new FormData(form[0]);

$.ajax({
    url: '/customer/create/',
    type: form.attr('method'),
    contentType: 'multipart/form-data',                    
    dataType: 'json',
    data: fd,
    processData: false,
    success: onSuccess,
    error: function(xhr, ajaxOptions, thrownError){
        alert(thrownError + '\n' + xhr.status + '\n' + ajaxOptions);
    }
});

使用FormData与form.serialize（）的django的ajax帖子

2 个答案: