传统表单提交文件上传,以及FormData异步ajax上传文件

时间:2022-08-29 09:46:38

 

传统的文件上传:

只用将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 & 是不行的。