传统的文件上传：

只用将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. [刘阳Java]_CSS数字分页效果

    先给出效果图,见下图.下图主要的完成当鼠标放到分页数字的上会呈现一个变大的效果 实现思路: (1). 使用浮动属性,以便让li元素水平排列. (2).将a元素设置为块级元素,然后设置它们的尺寸. (3 ...

  2. React组件三大属性之state

    React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...

  3. 《PHP 实现 Base64 编码/解码》笔记

    前言 早在去年 11 月底就已经看过<PHP 实现 Base64 编码/解码>这篇文章了,由于当时所掌握的位运算知识过于薄弱,所以就算是看过几遍也是囫囵吞枣一般,不出几日便忘记了其滋味. ...

  4. 2021 NOI冬令营

    2021 NOI冬令营 -- 本来想写得稍微文艺一点的,但是停课这么久已经退化到不会写文章了. 毕竟省选了我才来补的,时间也过去很久了. 毕竟这次我没有获得任何奖项. 我唯一的获得就是-- --好好看 ...

  5. P4293 [WC2010]能量场

    P4293 [WC2010]能量场 题意 给你 \(n\) 个粒子,每个粒子有两个权值 \(m_i,c_i\) 每个相邻有序对 \((a,b)\) 会产生 \(m_am_b(c_a-c_b)\) 的贡 ...

  6. Dijkstra和堆优化

    Dijkstra算法 由于我之前一直记的迪杰斯特拉的翻译导致我把dijkstra写成了dijstra--所以下文#define dijstra dijkstra 我以后叫她迪杰克斯歘! Dijskra ...

  7. 纯C语言(C89)实现动态数组

    起因 工作很少接触纯C项目,业余写着玩玩,不断雕琢 目标 纯C实现动态数组,提供方便易用泛型接口,避免依赖 实现 完全封装,隐藏结构体细节,不支持栈创建 拷贝存储,轻微性能代价换来易用性 vector ...

  8. (opencv10)膨胀和侵蚀(Dilation与Erosion)

    (opencv10)膨胀和侵蚀(Dilation与Erosion) 图像形态学操作 图像形态学操作-基于形状的一系列图像处理操作的合集,主要是基于集合论基础上的形态学数学 形态学有四个基本操作:腐蚀, ...

  9. videojs文档翻译Guides-components

    components Components Video.js播放器的架构围绕组件. Player类和所有表示播放器控件和其他UI元素的类都继承自Component类. 这种架构使得可以轻松地以反映DO ...

  10. spring框架的学习->从零开始学JAVA系列

    目录 Spring框架的学习 框架的概念 框架的使用 Spring框架的引入 概念 作用 内容 SpringIOC的学习 概念 作用 基本使用流程 SpringIOC创建对象的三种方式 通过构造器方式 ...