formData实现文件上传

最新推荐文章于 2024-08-12 09:54:37 发布
最新推荐文章于 2024-08-12 09:54:37 发布
阅读量390 收藏
点赞数 1
分类专栏： web前端 css3 笔记 文章标签： css html html5 css3 chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42678796/article/details/108877067
版权
web前端 同时被 3 个专栏收录
26 篇文章 1 订阅
订阅专栏
笔记
13 篇文章 1 订阅
订阅专栏
css3
12 篇文章 0 订阅
订阅专栏
这篇博客展示了如何使用HTML和JavaScript的fetch API实现文件上传功能。通过监听input[type='file']元素的change事件，获取用户选择的文件，并将其添加到FormData对象中，然后使用POST方法发送到指定的服务器URL。
摘要由CSDN通过智能技术生成 
<!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上传文件
Cyan的博客
06-05 1059
问题：    在做‘不合格商品处理情况填报页’把表单数据用 FormData 封装 发送到后台，但是后台拿到的字段值全都是null，且 后台拿不到文件数据文件上传与 Angular：https://www.jianshu.com/p/6bea6662fd74不设置undefined  就不会有逗号，但是这个也没了，所以 问题还是没有解决。。。最后在一个ionic交流群了，一个前辈告诉我，用原生的 ...
使用FormData上传文件
kedadiannao220的专栏
08-04 601
Table of Contents 1. 什么是FormData，有什么作用 2. 使用FormData上传文件 3. 思路整理什么是FormData，有什么作用MDN-FormData 上面写到FormData可以更容易的构建出key/value的形式，并可以方便使用XMLHttpRequest.send()方法，在请求的时候会将content-type设置为multipart/form-data
FormData实现文件上传（前端+后端）
07-12
文件上传，包括前端和后端的核心代码，IE8无法获取文件真实路径，可以通过该方法来实现文件上传，使用的是FormData传递文件数据。
FormData实现文件上传
AiJinJinG的博客
06-14 8703
应用场景： FormData+Ajax技术实现文件上传 1.FormData使用 FormData是一个构造函数，首先new FormData（），得到一个FormData对象 可以直接使用，直接console会是一个空白的对象，有append方法，delete，get，....... append(键，值)可以向空白的FormData中追加键值对的数据， 键 数据项的名字，必须是字符串 ； 值 数据项的值，可以是任意类型的数据 直接追加三个数据，但是此时输出fd里是看不到的，不像普通的对象形
Axios 通过 FormData 上传文件
csdnzhaoxiaosheng的博客
07-23 287
Axios 通过 FormData 上传文件
FormData实现文件上传（前端 后端）部分代码
12-13
FormData实现文件上传（前端 后端）部分代码 FormData实现文件上传（前端 后端) 工具类代码
HTML5 FormData实现文件上传实例
weixin_30691871的博客
08-06 162
表单提交，文件上传是一个常用又十分麻烦的功能，以前要上传文件通常都是借助插件或者flash来实现，噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后，老板再也不用担心我的上传了。 FormData可以把它理解成一个虚拟的表单对象，它只有一个方法append，这个可以在浏览器console一下就知道了。我们可以通过append向FormData里面添加各种需要提交的数据。 ...
jQuery用FormData实现文件上传的方法
01-19
另一方面，异步上传也避免了上传大文件时的页面长时间卡死。 HTML 一个type=file的<input>就可以让用户来浏览并选择文件， 一般会把输入控件放到一个<form>中，下面的一个简单的表单： <form> ...
使用FormData实现上传多个文件
10-17
总的来说，这个例子展示了如何使用`FormData`与XMLHttpRequest配合，实现前端多文件上传，并通过Spring MVC在后端接收并处理这些文件。这种技术对于现代Web应用中的文件上传非常有用，因为它允许异步、无刷新的文件...
jQuery利用FormData上传文件实现批量上传
01-19
在项目中涉及题库的批量上传功能，在此利用formdata进行文件上传，后台读取，进行批量插入。同时还需要带入teacherId和courseId两个参数，所以将文件和两个参数append到formdata中，传到后台。 JQuery 函数的提交...
利用FormData来实现文件上传-demo
weixin_45368324的博客
06-23 300
利用FormData来实现文件上传 file.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie
使用formData进行文件上传
最新发布
chuanjongkoujin的博客
08-12 160
最重要的是在请求头中添加上。
利用FormData上传本地文件
Sun_blog
12-20 7961
利用FormData上传本地文件
FormData实现文件上传实例
acugck6042的博客
11-30 94
单提交，文件上传是一个常用又十分麻烦的功能，以前要上传文件通常都是借助插件或者flash来实现，噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后，老板再也不用担心我的上传了。 FormData可以把它理解成一个虚拟的表单对象，它只有一个方法append，这个可以在浏览器console一下就知道了。我们可以通过append向FormData里面添加各种需要提交的数据。 ...
前端上传文件到后端的FormData实现
热门推荐
qq_15506981的博客
11-20 1万+
将本地数据（.xlsx、.docx等文件）上传或导入数据库，有时候需要使用FormData 对象。FormData对象，可以把所有表单元素的name与value组成一个queryString,提交到后台。 一、创建对象： 创建一个FormData对象实例 1、常用的创建 let formData = new FormData(); 2、vue中的创建 let formData = new window.FormData(); 3、在表单的基础上创建 <form id="fromCont" acti
【Ajax】- 使用 FormData() 实现文件上传
m0_55960697的博客
04-20 5539
主要的实现步骤： 1、使用文件选择器选择图片文件 2、把用户选择的文件存入 FormData 对象 3、使用 axios 把 FormData 发送给服务器 4、模拟文件选择器的点击事件 let iptFile = document.querySelector('#iptFile') // 用户选择文件之后所触发的事件：change iptFile.addEventListener('change', function () { // console.log(ip.
node formdata 实现多文件上传
09-10
Node.js中使用FormData可以实现多文件上传。下面是一个简单的示例代码： 首先，需要引入相关的模块： ``` const http = require('http'); const fs = require('fs'); const FormData = require('form-data'); ``` 然后，创建一个FormData对象，用于存储要上传的文件： ``` const formData = new FormData(); ``` 接下来，可以通过append方法向FormData对象中添加要上传的文件： ``` formData.append('file1', fs.createReadStream('path/to/file1.txt')); formData.append('file2', fs.createReadStream('path/to/file2.txt')); ``` 然后，创建一个请求对象： ``` const options = { hostname: 'localhost', port: 8000, path: '/upload', method: 'POST', headers: formData.getHeaders() }; const req = http.request(options, (res) => { // 处理服务器的响应 }); // 将FormData对象写入请求体 formData.pipe(req); req.on('error', (err) => { console.error(err); }); req.end(); ``` 最后，需要在服务器端接收并处理文件上传的请求。可以使用`multer`模块来处理文件上传: ``` const express = require('express'); const multer = require('multer'); const app = express(); const upload = multer({ dest: 'uploads/' }); app.post('/upload', upload.array('file', 2), (req, res) => { console.log(req.files); res.status(200).send('File uploaded successfully'); }); app.listen(8000, () => { console.log('Server started on port 8000'); }); ``` 上面的示例代码为使用Express框架，当有文件上传请求时，会将文件保存到`uploads/`目录下，并打印上传的文件信息到控制台。 这就是使用Node.js中的FormData实现多文件上传的简单示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值