传统的文件上传：

只用将form表单的entype修改成multipart/form-data，然后就可以进行文件上传，这种方式常用并且简单。

以下是另一种方式FormData，有时候我们需要ajax进行异步的文件提交，怎么办？

以下是引用别人的话：

FormData的使用

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。

FormData它的本质还是和表单设置成multipart/form-data，通过submit提交一样，但是它的好处是伪表单，通过js可构造，可以异步的进行文件的上传。

 var formData = new FormData();

 // 因为jQuery的原因$("#xx")[0]，如果时原生js，直接document.getElementById就行了

 formData.append(type, $("#"+id)[0].files[0]); //formData 添加文件

 formData.append("type", "image"); // formData添加普通字段

 $.ajax({

     type: "POST",

     url: 'http://localhost:8080/upload',

     // 以下是我对应的业务需求才加上的请求头

     beforeSend: function(request) {

		request.setRequestHeader("Authorization", "token");

     },

     data: formData,

     processData: false,

     contentType: false,

     success: function (data) {

     	console.log(data)

         alert(data);

     }

 });

以下是FormData整体代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="js/jQuery_3.3.1.js"></script>

    <title></title>

</head>

<body>

<input id="upload" type="file" />

<input type="button" value="上传" id="btn" />

</body>

<script type="text/javascript">

    // 提交方式：这里只说FormData的异步ajax文件上传方式

	//（跳过multipart/form-data;boundary=xxx的传统表单提交）

	var file_type = "image";

	var token = "lsnu12345";

	var type = "file";

	var id = "upload";

	$(document).ready(function () {

    	$("#btn").click(function(){

    		// 方式一：两个header，一个param

            //即input的id，用来寻找值

		    var formData = new FormData();

		    // 因为jQuery的原因$("#xx")[0]，如果时原生js，直接document.getElementById就行了

           // 方式二：一个header，两个params

           var formData = new FormData();

           formData.append(type, $("#"+id)[0].files[0]);

           formData.append("type", file_type);

           $.ajax({

               type: "POST",

               url: 'http://localhost:8080/upload/two-params',

               beforeSend: function(request) {

                   request.setRequestHeader("Authorization", token);

               },

               data: formData,

               processData: false,

               contentType: false,

               success: function (data) {

                   console.log(data);

               }

           });

    	});

    });

</script>

</html>

详细前后端ajax异步文件上传，参照：我的文件服务器[码云]基于SpringBoot

备忘

以下皆是我备忘的，和异步文件上传同时出现的问题，并无直接关系

1.SpringBoot中mapping中匹配多个url，记得使用xxxMapping(value = {“x/xx”, “y/yy”,“z/zz”})

2.SpringBoot中如果对类中成员变量的属性值进行properties注入，此注入一定是在SpringBoot上下文全部加载完，才能加载，在启动类(main中或者SpringInitListener中加载都是null的)

3.特殊情况下，项目包需要高权限后台运行，可以通过nohup sudo java -jar xxx & 的形式；但是sudo nohup java -jar xxx & 是不行的。

传统表单提交文件上传，以及FormData异步ajax上传文件的更多相关文章

  1. 非form表单提交的数据就要用@requestbody注解获取http传过来的值，尤其json

    非form表单提交的数据就要用@requestbody注解获取http传过来的值,尤其json

  2. Ajax提交与传统表单提交的区别说明

    Ajax提交是通过js来提交请求,请求与响应均由js引擎来处理,页面不会刷新,用户感觉不到实际上浏览器发出了请求.比如说我们希望网页总是显示最新的新闻,而又不想老是去点刷新按钮,我们就可以用Ajax机 ...

  3. form表单提交没有跨域问题，但ajax提交存在跨域问题

    浏览器的策略本质是:一个域名下面的JS,没有经过允许是不能读取另外一个域名的内容,但是浏览器不阻止你向另外一个域名发送请求. 所以form表单提交没有跨域问题,提交form表单到另外一个域名,原来页面 ...

  4. 关于form表单提交数据后不跳转页面+ajax接收返回值的处理

    1.前台的form表单建立,注意action.enctype的内容, 2.通过添加一个隐藏的iframe标签使form的target指向iframe来达到不跳转页面的效果,同时需要在js里获取ifra ...

  5. 向后台提交数据：通过form表单提交数据需刷新网页 但通过Ajax提交数据不用刷新网页可通过原生态Ajax或jqueryAjax。Ajax代码部分

    原生态Ajax提交表单:需要借助XMLHttpRequest对象的open,要收通过post发送请求还要setRequsetHeader,然后把数据发送给后端,代码如下 目录结构 index.py代码 ...

  6. Cross-origin resource sharing JSON with Padding 同源策略 JSONP 为什么form表单提交没有跨域问题，但ajax提交有跨域问题？ XMLHttpRequest and the Fetch API follow the same-origin policy 预检请求（preflight request）

    https://zh.wikipedia.org/wiki/跨来源资源共享 跨来源资源共享(CORS)是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略[1 ...

  7. 深入理解ajax系列第八篇——表单提交

    前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...

  8. Flask基础之返回值与form表单提交

    目录 1.Python 现阶段三大主流Web框架 Django Tornado Flask 对比 2.Flask的安装 3.Flask的第一个简单应用 4.Flask中的render_template ...

  9. jquery表单提交获取数据(带toast dialog)

    最近写了一个召集令,传统表单提交注册.写写遇到的费时间的点与解决办法 git项目地址:form-demo(针对于手机版,懒人可以直接使用,有排版和样式) demo使用Jquery,toast使用jqu ...

随机推荐

  1. DWA局部路径规划算法论文阅读：The Dynamic Window Approach to Collision Avoidance。

    DWA(动态窗口)算法是用于局部路径规划的算法,已经在ROS中实现,在move_base堆栈中:http://wiki.ros.org/dwa_local_planner DWA算法第一次提出应该是1 ...

  2. 微信小程序云开发-数据库-查询满足条件的数据

    一.查询价格大于10的商品 1.wxml文件 2.js文件 where条件语句:.where({price:db.command.gt(10)}) 3.查询结果 二.查询价格大于等于10的商品 js文 ...

  3. Leetcode：1305. 两棵二叉搜索树中的所有元素

    Leetcode:1305. 两棵二叉搜索树中的所有元素 Leetcode:1305. 两棵二叉搜索树中的所有元素 思路 BST树中序历遍有序. 利用双指针法可以在\(O(n)\)的复杂度内完成排序. ...

  4. P6982 [NEERC2015]Jump

    P6982 [NEERC2015]Jump 题意 给你一个未知的 01 串,每次可以输出询问一个 01 串,如果该串中正确的个数刚好等于 \(n\) 或者 \(n/2\) ,将会返回相应的答案,否则会 ...

  5. SpringCloud升级之路2020.0.x版-6.微服务特性相关的依赖说明

    本系列代码地址:https://github.com/HashZhang/spring-cloud-scaffold/tree/master/spring-cloud-iiford spring-cl ...

  6. js遍历终极大法--再也不用苦逼的for循环了

    while循环 while后面跟循环条件和执行语句,只要满足条件,就会一直执行里面的执行 var i = 0 while(i<10){ console.log(i) i++ } do...whi ...

  7. 【网站公告】避免反对百度的限制措施：百度搜索过来的访问会自动禁用js权限

    今天下午百度联系我们,发现通过百度搜索访问我们网站的博文时会出现下面反对百度的画面,让我们今天彻底处理好,保证不再出现这种情况. 我们排查后发现是这位博主申请了js权限,添加了下面的反对百度的脚本: ...

  8. Lateral Movement

    简介 这次去宁夏护网,发现我有的朋友连最基本的横向渗透有些都不晓得,他们问我 我也表达不清楚...,就想着写篇文章总结下吧 (慢慢更..) 可以发我邮箱讨论:muxue@protonmail.com ...

  9. 【Lua篇】静态代码扫描分析（四）规则检查

    一.前言 通过前面三篇文章已经初步实现了将Lua源代码文件读取解析成语法树,现在就可以通过得到的语法树进行指定规则的代码扫描检查.下图简单列举了一下单个Lua文件内部的语法关系情况(注意并非真正的类图 ...

  10. STM32启动文件详解及SystemInit函数分析（转）

    ;先在RAM中分配系统使用的栈,RAM的起始地址为0x2000_0000 ;然后在RAM中分配变量使用的堆 ;然后在CODE区(flash)分配中断向量表,flash的起始地址为0x0800_0000 ...