文本表单和图片一起进行ajax提交，表单是值，图片是对象，发送时有些问题

代码如下：

    
    
    
    
    
    





    

        标题
        
    
    

        内容
        
    
    

        图片
        
        
    
    submit






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

示例中，有两个文本表单，另外还有一张图片，一起提交到后台，
因为普通提交不能压缩图片，所以用js在前端压缩后，用ajax一起提交到后台，
提交过程中问题如下：
主要跟这两项相关:

processData: false,
contentType: false,

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

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

不知怎么弄

回复内容：

代码如下：

    
    
    
    
    
    





    

        标题
        
    
    

        内容
        
    
    

        图片
        
        
    
    submit






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

示例中，有两个文本表单，另外还有一张图片，一起提交到后台，
因为普通提交不能压缩图片，所以用js在前端压缩后，用ajax一起提交到后台，
提交过程中问题如下：
主要跟这两项相关:

processData: false,
contentType: false,

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

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

不知怎么弄

看了以下，这个插件是利用了FormData对象来发送文件的，所以你用jQuery.ajax()发送的数据的data属性必须是FormData对象，不能把FormData对象再作为data属性的子属性。

$.ajax({
    type: "POST",
    url: "{{ url('article/') }}",
    dataType: 'json',
    processData: false,
    contentType: false,  
    cache: false,
    data: {
        title: $("#title").val(),
        content: $("#content").val(),
        photo: formData    //这里错了，不能把FormData对象作为data属性的子属性
    }
})

应该是这样才对：

$.ajax({
    type: "POST",
    url: "{{ url('article/') }}",
    dataType: 'json',
    processData: false,
    contentType: false,  
    cache: false,
    data: formData    //直接把formData对象作为data属性的值发送
})

如果你要附加字段，可以用FormData对象的append方法：

//这段代码要在ajax请求之前
formData.append('title', $("#title").val());
formData.append('content',$("#content").val());

如果你要想把图片文件的字段名设置成photo，在localResizeIMG参数文档力其实已经说明了，就是在你压缩图片的代码那里这样修改：

lrz(this.files[0], {
    width: 800,
    fieldName: 'photo'    //把上传图片文件的字段设置为photo
})

另外要注意，FormData对象在IE上只有版本10以上才支持，其他现代浏览器（Firefox、Chrome、Safari、MS Edge等）都没问题。