formData对象实现表单数据的序列化 FormData对象的方法 formData实现文件上传核心代码

最新推荐文章于 2024-04-16 09:49:07 发布

kjs--

最新推荐文章于 2024-04-16 09:49:07 发布

阅读量781

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/qq_43157612/article/details/114453574

版权

前端专栏收录该内容

147 篇文章 3 订阅

订阅专栏

formData对象的用法

大家所浏览的任何网页上的图片，下载的资源，均需要先由资源拥有者上传到服务器上后才能被上网用户所获得，所以我们在开发一个网站时，利用Ajax进行文件上传是必不可少的一种编码操作
FormData的作用有2个
1.FormData 提供了一种表示表单数据的键值对的构造方式，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率
2. 如果想要使用Ajax做文件上传，需要配合使用FormData来构造数据

FormData存储格式
一对key/value组成一条数据，key 是唯一的，一个key可能对应多个 value
使用表单初始化，每一个表单字段对应一条数据，它们的 HTML name 属性即为 key 值，它们 value 属性对应 value值
在这里插入图片描述

FormData对象的创建

FormData两种创建方式的区别
1、创建空对象实例

let formData = new FormData();

2、使用表单初始化对象实例
2.1、准备一个表单

 <form id="f1">
        <input type="text" name="name" value="ivan">  
        <input type="password"  value="123456">       
 </form>

2.2、使用表单初始化FormData对象实例

 let formData = new FormData(document.querySelector('#f1'));
 console.log(formData.get('name'));  // 结果：ivan，因为表单中的input带有name="name"
 console.log(formData.get('pwd'));  // 结果：null,因为表单中的input 不带有name属性，如果加上name="pwd"即正常

FormData对象的方法

操作FormData对象的相关常用方法:
在这里插入图片描述

代码演示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let fd = new FormData();
        // formData api
        // 1.添加数据  写法 append(key,value)
        fd.append('键名', '数据1');
        fd.append('键名', '数据2');

        // 2.获取数据  写法 get(key)
        console.log(fd.get('键名'));

        // 3.获取数据 所有  写法 getAll(key)
        console.log(fd.getAll('键名'));

        // 4.修改数据 写法 set(key)  改变所有
        fd.set('键名', '修改的数据')
        console.log(fd.get('键名'));
        console.log(fd.getAll('键名'));


        // 5 删除数据 delete(key) 删除所有
        fd.delete('键名')

        // 6.检测key是否存在
        console.log(fd.has('键名'));


        fd.append('key', 'value')
        // 7.遍历所有数据
        fd.forEach((value, key) => {
            console.log(key + '=' + value);
        })

    </script>
</body>

</html>

formData实现文件上传核心代码

$('button').click(() => {
    // 2.创建一个formData实例
    let fd = new FormData();
    // 3. input:file dom对象有一个files属性 拿到这个值(有选择文件)
    let file = $('input')[0].files[0];
    // 4. 往实例追加数据  字段为服务器提供的名字
    fd.append('file_data', file);


    // 5.发送ajax请求
    $.ajax({
        url: 'http://127.0.0.1:3001/uploadFile',
        type: 'post',
        data: fd,
        success: (res) => {
            console.log(res);
        },
        contentType: false,     //设置为false
        processData: false		//设置为false
    })
})

1.创建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <p>
      <!-- 1.0 准备 file类型的input 元素，用户通过它可以选择客户端电脑硬盘上的文件到浏览器中 -->
        <input type="file" id="img">
    </p>
    <!-- 2.0 当用户点击此按钮时将 <input type="file" id="img">中读取到的文件上传到服务器，所以必须给此按钮注册click事件，js代码在下方实现 -->
    <button id="uploadButton">上传</button><br>
    <hr>
    <!-- 3.0 当服务器响应回来图片的地址JSON数据后，将图片地址设置到img的src属性中就能正常显示图片了 -->
    <img src="" alt="" id="imgsrc">  
</body>

</html>

2.编写上传代码

 <!-- 1.0 导入jquery -->
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
        $(function () {
            // 2.0 给id为uploadButton的按钮注册点击事件
            $('#uploadButton').click(function () {
                // 2.0.1 获取上传的文件
                var file = document.querySelector('#img').files[0];
                // 2.0.2 判断是否选择了文件
                if (!file) {
                    return alert('请选择一个文件');
                }

                // 2.0.3 上传操作
                // 2.0.3.1 构造一个FormData对象，因为文件不是字符串，所以需要FormData来构造(上传的固定代码)
                var formData = new FormData();
                //  2.0.3.2 添加文件到formData(上传的固定代码)
                // 注意:其中file_data要与上传Api文档说明中的参数名称一致
                formData.append('file_data', file);
                // 2.0.3.3 将formData通过ajax发送给服务器完成文件上传功能
                $.ajax({
                    url: 'http://127.0.0.1:3001/uploadFile',//地址从api文档中查找
                    method: 'post',//请求方式从api文档中查找
                    contentType: false,//上传文件时此参数默认为false
                    processData: false,//上传文件时此参数默认为false
                    data: formData,//将文件上传给服务器
                    success: function (resData)  //  服务器响应成功后的回调函数，resData存放了服务器响应的JSON数据
                    {
                        /*
                            resData格式：
                            {
                              "code":200,
                              "msg":"上传成功",
                              "src":"http:\127.0.0.1:3001\assets\uploads\m.jpg"
                            }
                        */

                        // 3.0 将图片回显到浏览器中
                        $('#imgsrc').attr('src', resData.src);
                    }
                })
            })
        })
    </script>

kjs--

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
formData对象实现表单数据的序列化 FormData对象的方法 formData实现文件上传核心代码

formData实现文件上传大家所浏览的任何网页上的图片，下载的资源，均需要先由资源拥有者上传到服务器上后才能被上网用户所获得，所以我们在开发一个网站时，利用Ajax进行文件上传是必不可少的一种编码操作核心代码$('button').click(() => { // 2.创建一个formData实例 let fd = new FormData(); // 3. input:file dom对象有一个files属性拿到这个值(有选择文件) let file = $
复制链接

扫一扫