formData实现文件上传

最新推荐文章于 2023-12-20 23:10:05 发布

一只不太聪明的燕子

最新推荐文章于 2023-12-20 23:10:05 发布

阅读量379

点赞数 1

分类专栏： web前端 css3 笔记文章标签： css html html5 css3 chrome

本文链接：https://blog.csdn.net/weixin_42678796/article/details/108877067

版权

web前端同时被 3 个专栏收录

26 篇文章 1 订阅

订阅专栏

笔记

13 篇文章 1 订阅

订阅专栏

css3

12 篇文章 0 订阅

订阅专栏

<!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>
    <input type="file">
</body>
</html>

<script>
    // 获取上传文件的dom元素
    let fileDom = document.querySelector('input[type="file"]')
    // 创建 表单对象 formData
    let formData = new FormData()

    fileDom.onchange = function () { 
        console.log(fileDom.files[0]); //获取上传的文件
        formData.append('headimgurl', fileDom.files[0])//使用append方法添加需要发送的文件(信息),第一个参数是后台指定的字段名
        fetch("http://chst.vip/students/uploadStuAvatar", {
            method: 'post',
            //body是fetch上文件的属性
            body: formData
        })
            .then(body => body.json())
            .then(res => {
                console.log(res);
            })
    }

</script>

一只不太聪明的燕子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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> <input typ
复制链接

扫一扫