异步提交表单中有文件域的提交方式

转载 于 2022-03-27 23:51:05 发布 · 370 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://blog.youkuaiyun.com/qq_16148137/article/details/51853886
文章标签：

#jquery #ajax #java-ee

本文介绍如何使用jQuery的Ajax功能提交包含文件类型的表单。关键步骤包括设置表单属性为enctype=multipart/form-data，利用formData对象构建表单数据，并确保设置processData:false与contentType:false。

用jQuery的Ajax提交表单中含有文件类型，就不能直接将其序列化提交

1、表单属性设置为enctype="multipart/form-data"，type="post"不必多说

2、先拿到当前提交表单的DOM对象，然后用formData对象对表单进行构造，就可以发送了，这是后端就可以拿到表单中的file数据。

注意：processData: false, contentType: false这两个属性要设置为false

本篇文章详细参考：使用Jquery的Ajax异步提交有二进制数据的表单实现方案_开发很忙的博客-优快云博客

JQuery异步提交表单与文件上传功能示例
10-20
主要介绍了JQuery异步提交表单与文件上传功能,结合实例形式分析了jQuery表单提交及文件传输操作的相关实现技巧,需要的朋友可以参考下
异步提交多文件上传
04-13
多文件异步上传，前端后端、以及前端压缩都包含了，若有问题可私聊本人
报错uncaught typeError：Illegal invocation解决方法、 processData: false参数将会变成 [Object object]解决方法
李程程的博客
11-09 6950
报错uncaught typeError：Illegal invocation解决方法、 processData: false参数将会变成 [Object object]解决方法解决 ajax向后台传值的时候把一个对象当作参数传上去了，所以才会报这个错误。 加上 processData: false, 时参数将会变成 [object object]后台将无法获取参数 解决 <!DOCTYP......
html异步提交表单,ajax异步提交含有文件的表单
weixin_30189603的博客
06-20 481
这几天一直在纠结这个，之前用的ajaxSubmit()提交表单如果有文件在的话就不行了，找到了一下的方法：按我的理解就是把form的内容转给了iframe去提交，所以当前的form是不会刷新变化的，当然如果有返回数据的话也是写到iframe里头。WEB 2.0 的时代之所以不同，是因为大量的在页面当中使用了 ajax 使得单一页面对于用户做到无刷新的友好交互。但是一旦页面牵扯到文件上传就出现了一些...
表单中含有文件时，如何提交？
min的博客
08-05 720
前端进阶（第三记） ajax //由于表单中含有文件，所以必须使用formdata来进行传递 var formData = new FormData(); //将其他要传递的内容append进formdata里面 formData.append("file", vm.uploadFile); formData.append("programVersion", vm.formParams....
jQuery异步提交表单实例
10-19
1. jQuery异步提交表单的概念：在网页开发中，异步提交表单是通过Ajax技术来实现的，这意味着可以在不重新加载整个页面的情况下，将表单数据发送到服务器，并接收服务器的响应。这种方式可以提高用户体验，因为它...
Ajax表单异步上传文件实例代码（包括文件域）
10-21
Ajax表单异步上传文件的实现方式主要依赖于现代浏览器提供的API。传统的上传方式是通过表单提交，导致整个页面刷新或跳转到新的页面。而Ajax上传则可以避免这种情况，它允许我们在不离开当前页面的情况下，将文件...
JQuery基于FormData异步提交数据文件
10-14
总结来说，JQuery结合FormData提供的异步提交功能，使得在Web应用中处理文件和复杂数据变得更加便捷和高效，同时保持了良好的用户体验。通过使用`$.ajax`方法并正确配置`FormData`，开发者可以轻松地实现在不刷新...
ajax(iframe)无刷新提交表单、上传文件
10-28
在传统Ajax请求中，由于浏览器安全策略（同源策略），Ajax不能用于提交表单或者上传文件。这是因为在XmlHttpRequest的send()方法中，不允许提交数据类型为multipart/form-data的表单。但是，通过将表单提交到一个...
MyAjaxForm.js实现异步表单提交
MyAjaxForm.js 是一个基于 JavaScript 编写的前端脚本库或模块，专注于实现表单的异步提交功能，属于现代 Web 开发中非常关键的一环。该文件名称中的“My”表明这可能是一个开发者自定义或轻量级封装的工具脚本，...
异步上传文件
weixin_30922589的博客
12-24 136
这里我写的有点重复了 不太简洁 整体可以再优化 formData 是DOM对象 不是jquery对象 var formData = new FormData($("#file")[0]); 对象.append() 可以追加表单内所有信息上传服务器 Jquery的对象是 不能处理file serialize() 序列化表单，用于 Ajax 请求,直接获取表单内数据...
Ajax异步提交上传文件
weixin_46981685的博客
04-11 348
1.Ajax异步上传文件 控制层： @GetMapping("add") public String add(){ return "add"; } @ResponseBody @RequestMapping("add") public boolean add(Goods goods,MultipartFile file){ if (null!=file &&am...
jquery 简易插件 异步form提交、文件异步提交，jquery 文件异步提交
huang007guo的专栏
07-24 480
$.ajax默认不支持文件提交， 这里提供一个form target =iframe 的异步提交插件 如果需要提交文件form需要设置属性 enctype="multipart/form-data"，使用插件后会自动使用target =iframe提交form 实现异步提交，兼容性好，用法简单！ (function ($){ /** * @name from的iframe...
$.ajax 提交文件域,Ajax表单异步上传文件实例代码（包括文件域）
weixin_32204175的博客
08-06 414
1.起因做前台页面时，需要调用WebAPI的Post请求，发送一些字段和文件(相当于把表单通过ajax异步发送出去，得到返回结果)，然后得到返回值判断是否成功。2.尝试先是尝试了一下 "jQuery Form Plugin" ，这玩意就是的巨大的坑，实现他和jquery1.9.2兼容性就不是太好，好不容易把$.browser的问题解决了，发现用他上传文件得不到返回值。$("#view").subm...
异步文件上传
AAAAAAAA12S的博客
12-27 1542
初识formdata对象 这个对象就是在文件上传的时候，使用。 formData对象作用 模拟html表单，相当于将html表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式 准备HTML表单 <form methods="post"> <input type="file" id="img"> </form> 把HTML的表单数据转换成formdata数据 var form = new FormData() 提交数据.
ajax异步表单提交图片上传,ajax实现异步文件或图片上传功能
weixin_30391889的博客
08-05 715
这篇文章主要为大家详细介绍了ajax实现异步文件(图片)上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下大家好，这篇文章我要给大家分享一个网页文件上传功能的代码，希望大家可以有所参考，或者给我提些建议。众所周知现在的各大网站基本都设有文件上传功能，用户可以把自己喜欢的图片或其他文件放在网上存起来，以便以后用的时候方便去找，可是一个网页的文件上传功能究竟该怎么去设置呢？今天我就以图片上传为...
vue ajax异步提交文件,vue.js异步上传文件前后端代码
weixin_42353186的博客
08-05 627
上传文件前端代码如下：上传{{ result }}正在上传中new Vue({el: '#app',data: {upath: '',result: '',uping:0},methods: {upload: function () {//console.log(this.upath);var zipFormData = new FormData();zipFormData.append('fil...
php怎么运行网页_PHP表单提交
weixin_39860757的博客
11-20 402
各位朋友，大家好！今天我们来聊聊在php里边如何将网页数据提交给php接收！首先，新建一个index.php文件，代码如下： "Content-Type" content= 注册页面"req.php" method= "330" border="0" align="center" cellpadding="5" bgcolor="#eeeeee"> ...
FormData+Ajax 实现多文件上传 学习使用FormData对象
weixin_30823833的博客
03-08 220
FormData对象是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。 今天我们使用dropzone和FormData实现多文件上传功能。 var SAMP = null; //Dropzone对象 SAMP = new Dropzone("#dropzone", { url: "#", /...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值