form表单上传数据的三种方式(ajax传递 / FormData文件 / serialize序列化传递 )

原创已于 2022-11-01 17:06:27 修改 · 9.6k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ajax #前端

于 2021-11-18 21:13:28 首次发布

JavaScript 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了几种常见的表单数据上传方式，包括通过POST请求直接传递参数数据、使用formData上传文件和其他数据、序列化表单数据等，并提供了基于jQuery的具体实现示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Form表单数据上传

前言
一、HTML结构(下方所有上传方式，都依托这个结构)
二、通过post请求的形式（直接传递对应的参数数据）
三、formData上传数据(文本、文件、视频、图片等)
四、form表单数据序列化(serialize将传递表单中的数据序列化)
form的action直接上传数据（不推荐）
总结
- 希望大家可以一键三连,作为对我的一种鼓励,继续免费跟大家贡献知识点!!!!!!!!!!!!!!!!!!!!

前言

提示：form表单上传数据,可以使用POST 请求发送数据…服务器!!!

此处要考虑上传文件的类型

1.文件类型（word、excel、image/png、mp4）等文件都需要使用 formData格式上传文件至服务器
2.其他的数据内容基本是那个都是按照对象的形式传递的，使用那种都可以

一、HTML结构(下方所有上传方式，都依托这个结构)

<body>
    <!-- type-text  键值对,方式提交 -->
    <!-- type=file  上传formData这种数据 -->
    <form action="">
        value1: <input type="text" id="value1" name="v1"><br> value2: <input type="text" id="value2" name="v2">
        <br>
        <button>提交</button>
    </form>

</body>

二、通过post请求的形式（直接传递对应的参数数据）

代码如下(基于jquery实现的):

//第一个版本
    $(function() {
        $('button').on('click', function(e) {
            e.preventDefault();
            //第一种方法:
            $.ajax({
                url: 'http://192.168.205.93:3000/add',
                type: 'POST',
                //键值对的方式提示:
                data: {
                    val1: $('#value1').val(),
                    val2: $('#value2').val()
                },
                success: (res) => {
                    console.log(res);
                }
            })
        })
    });

三、formData上传数据(文本、文件、视频、图片等)

代码如下（示例）：

//第二种方法
     $(function() {
         $('button').on('click', function(e) {
             e.preventDefault();
             // 1.先创建formData数据格式 传递HTML对象(文件上传推荐)
             var formData = new FormData($('form')[0]);
             // 2.把传递给服务器数据,追加到formData对象里面
             formData.append('val1', $('#value1').val())
             formData.append('val2', $('#value2').val());
             //删除数据
             // formData.delete('val1');
             //formData数据上传针对input=file ,在上传文件的时候采用
             //formData数据格式,大部分浏览器都支持formdata数据类型
             //使用serilayArray()只能传递普通参数
             //发送请求
             $.ajax({
                 url: 'http://192.168.205.98:3000/addFormData',
                 type: 'POST',
                 data: formData,
                 //如果提交数据格式为formData类型 必须加下面两句,不添加就报错
                 processData: false, //不希望使用   application/x-www-form-urlencoded
                 contentType: false, //不采用默认的数据类型 
                 //数据格式是 application/x-www-form-urlencoded
                 success: (res) => {
                     console.log(res);
                 },
                 error: function(err) {
                     console.log(err);
                 }
             })
         })
     })

四、form表单数据序列化(serialize将传递表单中的数据序列化)

代码如下（示例）：

 $(function() {
        //serialize form表单里面具有name属性的标签进行序列化, 序列化字符串
        console.log($('form').serialize());
        //serializeArray form表单里面具有name属性的标签进行序列化, 序列化数组套object
        console.log($('form').serializeArray());
        $('button').on('click', function(e) {
            e.preventDefault();
            $.ajax({
                url: 'http://192.168.205.85:3000/addserialize',
                type: 'POST',
                data: $('form').serializeArray(),
                success: (res) => {
                    console.log(res);
                }
            })

        })

    })