1.前言

需求是使用 jquery 的 ajax 异步提交表单,当然,不是简单的数据,而是包含文件数据的表单。于是我想到了 new FormData() 的用法,

可是仍然提交失败,原来是ajax的属性需要修改才可以

【同步在form标签 添加几个属性即可,这里就不解释了】

2.前端表单源码,【同时上传多文件,name属性要相同后台才可以以数组的形式获取】

1 <form id="myform">
2 <input type="file" name="fi">
3 <input type="file" name="fi">
    //按钮部分省略
    //
4 </form>

3.js 的 ajax写法源码 ,红色箭头代码是关键

4.后台接收文件数组截图  ,变量名称一定要与form表单的文件input 的name属性值 一致

5 . MultipartFile  和  CommonsMultipartFile 类型的区别

其实  MultipartFile  是接口名称  ,CommonsMultipartFile是 接口 MultipartFile 的具体实现类  ,因此 ,使用 CommonsMultipartFile必须定义参数名称  ,

前面需要加 @Param("参数名称")  ,

看起来很冗余  , 因此使用接口 MultipartFile 是最简洁的 , 加 【】则表示是数组型 ,用for循环遍历即可取出每一个

ajax 异步 提交 含文件的表单的更多相关文章

  1. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

  2. ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码

    首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...

  3. ajax方式提交带文件上传的表单,上传后不跳转

    ajax方式提交带文件上传的表单 一般的表单都是通过ajax方式提交,所以碰到带文件上传的表单就比较麻烦.基本原理就是在页面增加一个隐藏iframe,然后通过ajax提交除文件之外的表单数据,在表单数 ...

  4. ajax+FormData+javascript实现无刷新表单信息提交

    ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var f ...

  5. jQuery选取所有复选框被选中的值并用Ajax异步提交数据

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...

  6. jQuery.form.js jQuery ajax异步提交form

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所 ...

  7. 为什么上传文件的表单里要加个属性enctype

    为什么上传文件的表单里要加个属性enctype 上传文件的表单中<form>要加属性enctype="multipart/form-data",很多人只是死记硬背知道上 ...

  8. ajax+FormData+javascript 实现无刷新表单注册

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. AJAX异步提交,浏览器总跳出下载界面

    问题: 我在写一个网页的“用户登录”部分时,要将用户名和密码传到后端验证,想在前端用了AJAX异步提交功能,将 用户名密码传到后端,然后后端返回验证结果.但AJAX写好后每次刷新网页都会跳出下载窗口, ...

随机推荐

  1. Apache Log4j2远程代码执行漏洞攻击,华为云安全支持检测拦截

    近日,华为云安全团队关注到Apache Log4j2 的远程代码执行最新漏洞.Apache Log4j2是一款业界广泛使用的基于Java的日志工具,该组件使用范围广泛,利用门槛低,漏洞危害极大.华为云 ...

  2. 赋能开发:捷码携手达内教育打造IT职业教育新生态

    近日,达内教育与远眺科技签约联合培养的第一批低代码开发方向的高职学生,在杭州未来科技城捷码总部顺利毕业,首期合格学员总数超过30名.随着这些接受了"捷码"低代码平台全程" ...

  3. Java oop 笔记

    摘要网址:http://note.youdao.com/noteshare?id=bbdc0b970721e40d327db983a2f96371

  4. linux下编译php扩展

    1 在pecl.php.net搜索你需要的php扩展 2 在解压后的扩展目录运行phpize 3 执行编译./configure --with-php-config=/usr/local/php/bi ...

  5. thinkphp引入PHPExcel类---thinkPHP类库扩展-----引入没有采用命名空间的类库

    最近项目中遇到引入PHPExcel第三方类库 但是下载的phpExcel类没有命名空间,而且所有接口文件的命名都是以.php结尾  而不是tp中的.class.php 解决办法很简单:在引入没有采用命 ...

  6. 使用 WPF 做个 PowerPoint 系列 基于 OpenXML 解析实现 PPT 文本描边效果

    本文是使用 WPF 做个 PowerPoint 系列的博客,本文来告诉大家如何解析 PPT 里面的文本描边效果,在 WPF 应用中绘制出来,实现像素级相同 背景知识 在开始之前,期望你了解了 PPT ...

  7. manjaro(arch系)Linux使用(一)

    # manjaro的使用 ## 配置源 先切换国内的镜像源仓库 `sudo pacman-mirrors -i -c China -m rank` 在弹出的窗口中选择延迟最小的源 ### 添加arch ...

  8. CF897B Chtholly's request 题解

    Content 我们将长度为偶数的回文数称作 zcy 数,比如 \(11,1221\) 是 zcy 数,而 \(34,121\) 不是.假设第 \(i\) 个 zcy 数为 \(a_i\),求 \(\ ...

  9. re正则表达式:import re ;re.search()

    http://www.cnblogs.com/alex3714/articles/5161349.html re模块 常用正则表达式符号 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...

  10. Linux下使用JDK11部署Nacos启动报错:Could not find or load main class

    Linux下使用JDK11部署Nacos 错误日志 /nacos/jdk-11.0.12/bin/java -server -Xms2g -Xmx2g -Xmn1g -XX:MetaspaceSize ...