ajax传递包含图片的from表达,文本表单和图片一起进行ajax提交，表单是值，图片是对象，发送时有些问题...

代码如下：

标题

内容

图片

submit

// 用到了localResizeIMG插件，压缩图片: https://github.com/think2011/localResizeIMG

$(function () {

var $preview = $('#preview');

var formData = null;

//压缩图片

$('#photo').on('change', function () {

lrz(this.files[0], {

width: 800

}).then(function (rst) {

//图片预览

$preview.attr('src', rst.base64);

//根据需要增加一些信息

rst.formData.append('fileLen', rst.fileLen);

//压缩后的图片暂存在变量formData中

formData = rst.formData;

});

});

//ajax请求

$("#submit").click(function () {

//设置TOKEN

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

$.ajax({

type: "POST",

url: "{{ url('article/') }}",

dataType: 'json',

processData: false,

contentType: false,

cache: false,

data: {

title: $("#title").val(),

content: $("#content").val(),

photo: formData

}

}).done(function (data) {

alert(JSON.stringify(data));

}).fail(function (jqXHR, textStatus) {

console.log(jqXHR);

console.log(textStatus);

});

});

});

示例中，有两个文本表单，另外还有一张图片，一起提交到后台，

因为普通提交不能压缩图片，所以用js在前端压缩后，用ajax一起提交到后台，

提交过程中问题如下：

主要跟这两项相关:

processData: false,

contentType: false,

1、如果让这两项生效，Request payload显示为：[object Object],ajax请求能成功发送，但jquery拿不到表单的值。

2、如果注释掉这两项，谷歌浏览器控制台报错：Uncaught TypeError: Illegal invocation，ajax请求不能发送。

不知怎么弄