jQuery 提交 FormData 对象，前方有坑

拼搏现实的明天。 2021-09-15 13:28 307阅读 0赞

> ![这里写图片描述][20180609034526478] 允许我做一个悲伤的表情

在 Laravel 中提交了半天马歌姬的，老是提交不上去，一直报 jQuery 的错，弄了半天发现是 FormData 的问题。

我拿着 `file` 文件对象一个一个 `append` 到 **FormData** 里，最后用的 `$.post` 方法在那儿傻啦吧唧的提交了半天

呸，什么瘠薄玩意儿，才发现 `processData` 这玩意儿在使用 `FormData` 作为数据体时是不能开启的

而 `$.post` 里默认又是开启的【你就不能自己识别一下 `data` 的数据类型自己判断下？】

所以只能用 `$.ajax` 这个方法了：

var data = new FormData();
    
    // 额外的数据直接传就行了
    data.append('_token', 'xxxxxxxxxxxxxxx');
    
    $(files).each(function(idx){ 
        data.append('file[]', files[idx]); // append 走一圈，第三个参数文件名称可空
    });
    
    $.ajax({  // $.post，告辞
        type: 'post',
        contentType: false, // 关关关！必须得 false
                            // 这个不关会扔一个默认值 application/x-www-form-urlencoded 过去，后端拿不到数据的！
                            // 而且你甚至不能传个字符串 'multipart/form-data'，后端一样拿不到数据！
        processData: false, // 关关关！重点
        url: '/upload',
        data: data,
        success: function (response) { 
            // TODO
        }
    });

[20180609034526478]: /images/20210908/7de86d3e3e2b4a2c91a504751df8edd5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，307人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS FormData对象

摘要通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说

快来打我*/ 2022年08月08日 00:45/ 0 赞/ 171 阅读

相关通过jQuery Ajax使用FormData对象上传文件

但上传文件部分只有底层的`XMLHttpRequest`对象发送上传请求，那么怎么通过`jQuery`的`Ajax`上传呢？本文将介绍通过`jQuery`使用`FormD

蔚落/ 2022年07月16日 09:40/ 0 赞/ 231 阅读

相关 FormData 对象的使用

FormData 对象的使用通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立

﹏ヽ暗。殇╰゛Y/ 2022年05月30日 05:11/ 0 赞/ 167 阅读

相关 JavaScript的FormData对象

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使

秒速五厘米/ 2022年05月12日 06:56/ 0 赞/ 181 阅读

相关文件和对象同时提交组装formData

1.提交组装数据 var file1 = document.getElementById("imgSdf1").files\[0\]; v

我就是我/ 2022年05月10日 06:44/ 0 赞/ 168 阅读

相关 formData和blob 对象

formdata FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利，上传二进制

落日映苍穹つ/ 2022年04月15日 06:07/ 0 赞/ 292 阅读

相关 HTML5 FormData对象

利用[`FormData`][FormData]对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用`XMLHttpRequest`发送这个"表单". 创建一个Fo

绝地灬酷狼/ 2021年12月15日 10:31/ 0 赞/ 240 阅读

相关使用FormData对象

使用FormData对象 TABLE OF CONTENTS 1. `` `` 2. [创建一个FormData对象][FormData]``````

叁歲伎倆/ 2021年10月01日 02:38/ 0 赞/ 319 阅读

相关 jQuery 提交 FormData 对象，前方有坑

> ![这里写图片描述][20180609034526478] 允许我做一个悲伤的表情在 Laravel 中提交了半天马歌姬的，老是提交不上去，一直报 jQuery 的错，

拼搏现实的明天。/ 2021年09月15日 13:28/ 0 赞/ 308 阅读

相关 FormData对象

FormData对象一、什么是FormData对象二、语法三、express处理formdata对象四、FormData对象实例的方法

以你之姓@/ 2021年09月07日 06:12/ 0 赞/ 377 阅读