传统的文件上传：

只用将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. Day11继承、封装、多态-面向对象编程（2）

    封装 我们设计程序要追求 高内聚,低耦合 . 高内聚:类的内部数据操作细节自己完成,不允许外部干涉 低耦合:仅暴露少量方法给外部使用 封装(数据的隐藏) 通常,应禁止直接访问一个对象中数据的实际表示, ...

  2. 微信小程序云开发-云存储-使用云开发控制台存储文件

    一.存储 进入[云开发控制台]>点击[存储].将需要存储的文件通过[上传文件]方式上传上去.或者通过拖拽的方式上传文件.  二.存储文件的类型 可以存储的文件有很多,常见的文件类型包括:word ...

  3. 从源码构建Vim

    从源码构建Vim 引言 事情是介样滴,因为我是个Vim 重度使用者了差不多.. 但在大部分系统上能安装到的或者自带的都是比较老的版本,可能是7.x 之类的.也或者是你需要使用到Vim 的某些特性或者功 ...

  4. PAT乙级：1057 数零壹 (20分)

    PAT乙级:1057 数零壹 (20分) 题干 给定一串长度不超过 105 的字符串,本题要求你将其中所有英文字母的序号(字母 a-z 对应序号 1-26,不分大小写)相加,得到整数 N,然后再分析一 ...

  5. 重新手写一个Vue

    该版把上一次的数据修改就更新全部页面改为了局部更新,相比于上一版的在数据绑定上不是简单的一个监听set再全部更新,具体见下文. 总体流程 仍然是根据自己理解来实现的绑定,相较于上一版的数据更新就全部刷 ...

  6. 消息队列 折腾ActiveMQ时遇到的问题和解决方法

    1.先讲严重的:服务挂掉. 这得从ActiveMQ的储存机制说起.在通常的情况下,非持久化消息是存储在内存中的,持久化消息是存储在文件中的,它们的最大限制在配置文件的<systemUsage&g ...

  7. LUSE: 无监督数据预训练短文本编码模型

    LUSE: 无监督数据预训练短文本编码模型 1 前言 本博文本应写之前立的Flag:基于加密技术编译一个自己的Python解释器,经过半个多月尝试已经成功,但考虑到安全性问题就不公开了,有兴趣的朋友私 ...

  8. header.mapper 用法

    const header= [xxxx,xxxx] 基本用法是 const obj = header.map( item=>{ obj= item+'123'; return  obj }) c ...

  9. 从零开始了解kubernetes

    kubernetes 已经成为容器编排领域的王者,它是基于容器的集群编排引擎,具备扩展集群.滚动升级回滚.弹性伸缩.自动治愈.服务发现等多种特性能力. 本文将带着大家快速了解 kubernetes , ...

  10. 【剑指offer】53 - II. 0～n-1中缺失的数字

    剑指 Offer 53 - II. 0-n-1中缺失的数字 知识点:数组,二分查找: 题目描述 统计一个数字在排序数组中出现的次数. 示例 输入: nums = [5,7,7,8,8,10], tar ...