传统的文件上传：

只用将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. centos7 源码安装指定版本的php7

    很多时候可能会遇到需要手动源码安装软件的时候,所以自己实践了一把,并且把安装过程中遇到的问题,以及在网上找到的解决办法(实测有效)都记录下来,方便日后学习实践. 1. 系统环境 # cat /etc/ ...

  2. 使用ThinkPHP5.0.12连接Mongo数据库的经验

    本地开发环境xamppv3.2.2,ThinkPHP5.0.12版本. 由于之前开发项目时使用的是TP3.2.3+mongo数据库,也是在本地进行的,所以也进行过mongo数据库驱动的配置.详细方法可 ...

  3. 开发工具IDE从入门到爱不释手（五）更多实用操作

    更多实用技巧 Tabs分屏和独立 日志链接及浏览器 设置浏览器 本地修改历史 三秒钟不操作,自动保存一个版本 右键--Local History--Show History 查看方法调用情况 按住方法 ...

  4. git教程和命令集合

    详细教程可参考 git community book中文版 git教程(廖雪峰) 安装 官网下载git安装包,进行安装即可: 打开cmd终端,输入 "git --version", ...

  5. Windows7/10 防火墙开放Oracle数据库1521端口

    安装Oracle 12C数据库,在局域网中,允许其他电脑访问,则需要开启防火墙的 1521端口 ==================================================== ...

  6. C++第四十九篇 -- 将一个项目Copy到另一台电脑

    最近写项目,由于设备原因,需要将一台电脑的项目拷贝到另一台电脑上,在另一个电脑上继续编写.由于配置属性原因,最终还是在另一台电脑上创建了新项目,只是把这些cpp文件都复制过去了,然后重新部署属性. 背 ...

  7. 当vue 页面加载数据时显示 加载loading

    参考:https://www.jianshu.com/p/104bbb01b222 Vue 页面加载数据之前增加 `loading` 动画 创建组件 1.新建 .vue 文件: src -> c ...

  8. js中变量提升和函数提升

    变量提升和函数提升的总结 我们在学习JavaScript时,会遇到变量提升和函数提升的问题,为了理清这个问题,现做总结如下,希望对初学者能有所帮助 我们都知道 var 声明的变量有变量提升,而 let ...

  9. 论文笔记：（2017NIPS）DeepSets

    目录 摘要 一.引言 二.置换不变性和等变性 2.1 问题定义 2.2 结构 2.3 相关结果 三.Deep Sets 3.1 架构 3.2 其他相关工作 四.应用和实验结果 4.1 设置输入标量响应 ...

  10. 手写Pascal解释器（一）

    目录 一.编写解释器的动机 二.part1 三.part2 四.part3 一.编写解释器的动机 学习了Vue之后,我发现对字符串的处理对于编写一个程序框架来说是非常重要的,就拿Vue来说,我们使用该 ...