使用FormData对象提交表单-上传附件

最新推荐文章于 2024-04-02 04:04:01 发布
最新推荐文章于 2024-04-02 04:04:01 发布
阅读量342 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/near_nie/article/details/74942611
版权

问题：在使用jquery的ajax请求传递附件的时候报bad request，后台对应的对象是MultipartFile

问题分析：以往使用jquery的ajax请求的时候都是直接使用的json格式传递参数，但是遇到传文件的时候就行不通了，这时候想到的就是前台传递的数据格式不对。

解决办法：使用FormData对象提交表单的方式。

贴上部分代码：

前台：





后台对象：



聂晶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
formData提交form表单（小记）
weixin_52380943的博客
06-01 185
1.XMLHttpRequest发送这个"表单" <form id="uploadFormadd" enctype="multipart/form-data" method="post" name="fileinfo"> <input id="file" type="file"/> <button id="upload" type="button">upload</button> </div> <script type="text/
前端上传文件到后端的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
H5 FormData对象的使用——进行Ajax请求并上传文件
diaocheng9093的博客
01-04 291
XMLHttpRequest Level2 添加了一个新的接口——FormData。【 主要用于发送表单数据,但也可以独立使用于传输键控数据。与普通的Ajax相比，它能异步上传二进制文件 】 利用FormData对象，可通过js用一些键值对来模拟一系列表单控件，还可以使用XMLHttpRequest的send()方法异步提交表单。 首先，在之前的“前后台交互之传参方式”中讲了传统的...
使用FormData对象提交表单
webbc的博客
10-12 8140
这是HTML5中新增的一个Api，他能以表单对象作为参数，自动的把表单的数据打包，当ajax发送数据时，发送这个FormData对象，以达到发送表单数据的目的。创建： 参数是一个form节点对象var fm = document.getElementById('formid'); var fd = new FormData(fm);优点： （1）在以往的ajax做post请求时，当提交的数据比较
使用formData给后台提交表单数据
perry
09-26 7194
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> FormData Demo </title> </head> <body>
js使用formData实现批量上传
01-21
利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二...
使用jquery Ajax实现上传附件功能
12-01
接下来，我们使用这个FormData对象作为$.ajax()方法中的data参数。为了确保数据不被jQuery自动序列化，我们需要设置`processData`选项为`false`。同时，由于我们已经有了formData，所以需要设置`contentType`为`...
Vue实现附件上传功能
10-15
4. `uploadFile(file)`: 这是自定义的文件上传方法，将文件放入FormData对象中以便发送到服务器。实际开发中，你需要在这里添加向后端发送请求的逻辑，比如使用`axios`或者`fetch`。 在实际使用时，你需要根据你的...
图片与表单同时上传element-ui (2).md
11-22
// 将图片添加到formData对象 }, // 假设这是后端接口调用方法 upload(formData) { // 实际项目中应该发送到后端接口 console.log('模拟上传', formData); } } } ``` #### 四、关键知识点解析 1. **表单...
layui多附件上传.rar
09-11
在Web开发中，多附件上传通常涉及到HTML5的FormData对象，通过JavaScript控制文件选择，然后使用Ajax异步提交文件数据。layui的upload模块会自动处理这些细节，开发者只需配置相应的参数即可。 4. 新增、修改、...
表单formdata提交(可以根据标签（使用submit提交）、（也可以使用formdata对象使用ajax提交））
weixin_43878003的博客
05-29 1384
表单的二种方式 1，标签的form 一.创建一个formData对象实例的方式 1、创建一个空对象 var formData = new FormData();//通过append方法添加数据 2、使用已有表单来初始化对象 //表单示例 名字 密码 //方法示例 // 获取页面已有的一个form表单 var form = document.getElementById(“myForm”); // 用表单来初始化 var formData = new FormData(form)
Vue 和 HTML FormData配合axios或ajax上传文件，提交表单数据
最新发布
weixin_57992300的博客
04-02 1169
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
使用FormData对象提交表单及上传图片
qq_43679771的博客
01-24 429
使用FormData对象提交表单及上传图片
formData附件上传
betty_zhou0807的博客
07-17 143
//阀值配置过程上传文件 t.find("#config_file").change(function() { var textName = $(this)[0].files[0].name; t.find(".inner_textName").html(textName); ...
java 模拟form表单提交数据可以文件上传
@chenk的博客
12-06 798
import java.io.*; import java.net.HttpURLConnection; import java.net.URL; import java.util.ArrayList; public class HttpPostEmulator { // 每个post参数之间的分隔。随意设定，只要不会和其他的字符串重复即可。 private static fi...
如何通过ajax实现同时上传文件及普通表单 - 一文了解FormData
bug处理进行时
09-10 4505
使用键值对的方式模拟表单控件，可以使用XML HttpRequest的send()方法来异步提交表单数据。
Java发送form-data请求实现文件上传
IceFloe_Rot的博客
10-18 9824
如何使用Java发送form-data格式的请求上传multipart文件? 封装了以下工具类： package com.leeyaonan.clinkz.common.util; import java.io.File; import java.io.IOException; import java.nio.charset.StandardCharsets; import java.util.*; import java.util.concurrent.ScheduledExecutorService;
Java模拟FormData表单提交
fate_destiny的博客
11-21 3475
在敲代码之前，我们需要了解正常的FormData表单提交究竟向服务器提交了哪些内容。 首先使用postman向本地socket服务器发送FormData表单，postman示例如下： socket服务端收到的内容如下： 127.0.0.1:11787 Data Request : POST / HTTP/1.1 User-Agent: PostmanRuntime/7.19.0 Accept: ...
Jenkins 插件开发记录
liurizhou的博客
01-28 3895
来到新公司不久，主管安排一个jenkins 插件开发的小需求给我，让我练练手，之前从未接触过相关内容，一切从0开始，做了一个月，基本完成需求上的功能，期间遇到不少困难，记录做以总结。 现阶段网上相关的指导还是比较匮乏，我个人觉得比较好的方法是：参考已有插件的源码！ 需求大致是这样的： 点击进入某次历史编译，将本次上传至Artifactory的文件copy 到Artifactory中的release...
formdata提交表单前后端代码
04-28
前端代码： 发送FormData可以使用原生的XMLHttpRequest对象，也可以使用ajax方法。下面以ajax方法为例： ``` // 获取表单元素和数据 let form = document.querySelector('#myForm'); let formData = new FormData(form); // ajax发送数据 let xhr = new XMLHttpRequest(); xhr.open("POST", "/submitform"); xhr.send(formData); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // 请求完成后的处理代码 console.log(xhr.responseText); } } ``` 后端代码： 后端代码需要根据具体框架来进行处理，下面以Node.js Express框架为例： ``` const express = require('express'); const bodyParser = require('body-parser'); const app = express(); // 解析表单数据 app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); // 处理post请求 app.post('/submitform', function(req, res) { let formData = req.body; console.log(formData); // 处理表单数据 // ... res.send('提交成功'); }); app.listen(3000, function() { console.log('服务器启动成功'); }); ``` 其中，body-parser中间件用于解析请求体中的表单数据。处理请求的函数中可以通过req.body获取表单数据。对于一些数据处理的逻辑可以根据具体需求进行编写。最后使用res.send()方法返回请求结果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值