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

传统的文件上传:

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

上一篇:NFine框架全选checkBox列错位


下一篇:mzy git学习,git协同开发忽略文档配置以及一些杂点(九)