最近在做一个后台的发布监控系统项目,主要负责监控项目个接口以及对项目做一些发布,回滚等操作,其中在写发布功能时需要做文件上传,把对应的项目jar包上传到服务器然后发布,使用的是ajax请求做文件上传,其中遇到的一些问题,特此记录!
HTML页面点击发布按钮会弹出文件上传的模态框。method必须为POST,文件上传必须加上enctype="multipart/form-data,且input框的type必须为file,多选上传可以加入multiple="multiple"属性。
<div class="modal-body">
<form id="uploadForm" method="post" enctype="multipart/form-data">
<input type="file" name="Myfile" id="uploadFile"/>
</form>
</div>
JS部分,主要负责弹出弹出模态框,选择文件以及,发送发布请求。
因为,这个发布功能除了需要传入上传的文件还需要其他的一些参数,在网上看了一下就使用了FormData对象,相当于以表单的形式传入参数即可,可传入多个参数,传入的参数名称最好与后端接受的名称一致。
//获取上下文路径
function getContextPath(){
var pathName = document.location.pathname;
var index = pathName.substr(1).indexOf("/");
var result = pathName.substr(0,index+1);
return result;
}
//发布按钮
$(document).on("click",".pulish_btn",function(){
//弹出模态框
$("#publish_system_modal").modal({
backdrop:"static"
});
});
//确认发送请求
$("#publish_btn").click(function () {
var file = $("#uploadFile")[0].files[0]; //获取上传的文件,uploadFile对应input框id
var formData = new FormData(); //新建一个formData对象,以表单的形式传参
formData.append("fileContent",file);
formData.append("pid","1");
formData.append("serverName","2");
formData.append("serverIp","3");
$.ajax({
url: getContextPath()+"/publish",
type: "POST",
data:formData,
cache: false,
processData:false,//默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false
contentType:false,//避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件
success: function (result) {
//请求完清空表单上传文件内容
var obj = document.getElementById('uploadFile') ;
obj.outerHTML=obj.outerHTML;
},
error:function () {
}
});
});
Controller代码,后端使用MultipartFile 来接受上传文件内容,这里需要注意注解@RequestParam的value需要与表单的上传文件的input框的name一致。
/**
* 发布系统
* @return
*/
@PostMapping(value = "/publish")
@ResponseBody
public BaseResponse publishSystem(@RequestParam(value = "Myfile", required = false) MultipartFile fileContent,
@RequestParam(required = false)String pid,@RequestParam(required = false)String serverName,
@RequestParam(required = false)String serverIp){
}
因为之前没怎么写过前端代码,Ajax使用的也少,避免不了踩了大量的坑,特此记录。
servlet的上传与下载可参考之前的:https://blog.csdn.net/xxxxu5811/article/details/114840922