最近做一个前后台分离的项目,要用到前端页面传递文件对象给后端,就研究了一下框架中自带的类Upload接口、FileUpload类。
1. 后端的控制器能够接收到play.mvc.Http.Request对象,这个对象中有一个args参数,args参数内还内嵌一个__UPLOADS属性,我们可以通过这样的关系获取文件对象
private static Map<String, File> getRequestFileParam(Request request){
Map<String, File> files = Maps.newHashMap();
Map<String, Object> paramMap = request.args;
if(!paramMap.isEmpty()) {
List<Upload> uploads = (List<Upload>)paramMap.get("__UPLOADS");
for(Upload upload : uploads) {
if (upload instanceof FileUpload) {
FileUpload mem = (FileUpload)upload;
File file = upload.asFile();
files.put(mem.getFieldName(), file);
}
}
}
return files;
}
上面的示例通过play自带的功能获取前端传递过来的多个文件对象,我们可以通过自己的需求做不同的改造定制开发。
2. 使用play框架在控制器中接收文件对象的方法我们上面已经学习到了,下面就记录一下前端页面如何传递文件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="" id="formData" enctype="multipart/form-data">
<input type="file" name="files" value="文件上传" id="file">
<input type="file" name="files1" value="文件上传" id="file1">
<input type="button" value="上传" id="upload">
</form>
<script src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).on('click',"#upload", function(){
// var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
var formData = new FormData($("#formData")[0]);
// console.log({'file':$('#file').get(0).files[0]});
// var ff = {'file':$('#file').get(0).files[0]};
// var ff1 = {'file1':$('#file1').get(0).files[0]};
// formData.append("files", ff)
// formData.append("file1", ff1)
$.ajax({
url : '/api/ggmsg/msg/action/FileUploadAction',
type : 'post',
async: false,
cache: false,
contentType: false,
processData: false,
dataType : 'json',
data:formData,
success : function(data) {
console.log(data)
},
error: function (data) {
}
});
});
</script>
</body>
</html>