传统的文件上传：

只用将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. ACM金牌选手讲解LeetCode算法《栈和队列的高级应用》

    大家好,我是编程熊,双非逆袭选手,字节跳动.旷视科技前员工,ACM金牌,保研985,<ACM金牌选手讲解LeetCode算法系列>作者. 上一篇文章讲解了<线性表>中的数组.链 ...

  2. 网络损伤仪WANsim中关于丢包的介绍

    网络损伤仪WANsim中的4种丢包模型 丢包是指在网络上传输的数据包无法到达指定目的地.丢包在广域网中是一个很常见的问题.想要模拟出真实的广域网环境,对丢包的精确模拟是必不可少的. 在网络损伤仪WAN ...

  3. P3643 [APIO2016]划艇

    P3643 [APIO2016]划艇 题意 一个合法序列可表示为一个长度为 \(n\) 的序列,其中第 \(i\) 个数可以为 0 或 \([l_i,r_i]\) 中一个整数,且满足所有不为零的数组成 ...

  4. nodejs 文本逐行读写功能的实现

    利用nodejs实现:逐行读写(从一个文件逐行复制到另外一个文件):逐行读取.处理和写入(读取一行,处理后,写入另一个文件) 1.所需要的模块: fs,os,readline 2.具体实现: a. 功 ...

  5. Maven安装配置及与 IDEA2021集成

    ============================================== 搭建Java Web开发环境 Windows10 64bit+IDEA2021.2+JDK11+Tomca ...

  6. 深入刨析tomcat 之---第6篇 how tomcat works 第5章 容器实现原理

    writedby 张艳涛

  7. ACM金牌选手讲解LeetCode算法《哈希》

    大家好,我是编程熊. 往期文章介绍了<线性表>中的数组.链表.栈.队列,以及单调栈和滑动窗口. ACM金牌选手讲解LeetCode算法<线性表> ACM金牌选手讲解LeetCo ...

  8. 浅谈vue响应式原理及发布订阅模式和观察者模式

    一.Vue响应式原理 首先要了解几个概念: 数据响应式:数据模型仅仅是普通的Javascript对象,而我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率. 双向绑定:数据改变,视图 ...

  9. 小马哥的 Java 项目实战营学习笔记（1）

    小马哥的 Java 项目实战营 小马哥的 Java 项目实战营 第二节:数据存储之 JDBC JDBC 核心 API 数据源 接口 - javax.sql.DataSource获取方式 1.普通对象初 ...

  10. Java面向对象14——接口

    接口  package oop.demon01.demon09; ​ //抽象思维~Java ​ //interface 定义的关键字 , 接口都需要有实现类 public interface Use ...