平时我们上传文件的时候都是跟表单一起提交到后台,在对象的属性里定义 private List<MultipartFile> files;这时候你在表单中上传多少个文件都能在后端自动获取到,今日需求是如何单独上传一个文件呢?
在这里我们用的是 bootstrap-filestyle这个插件
引入js
<script type="text/javascript" src="${ctx}/static/bootstrap/filestyle/bootstrap-filestyle.js"></script>
html
<input type="file" name="file" class="filestyle" id="file" data-buttonText="Select">
再来个上传按钮
<button class="btn btn-info" οnclick="importFile()" type="button">Import</button>
效果是这样
js 代码
function importFile(){
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url: prefixUrl + "importFile",
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false,
dataType:"json",
success : function(data) {
if (data == 200) {
alert('上传成功!');
}
},
error: function () {
alert('上传失败!');
}
});
}
java 代码
@RequestMapping(value = "importFile",method= RequestMethod.POST)
@ResponseBody
public Integer importFile(@RequestParam("file") MultipartFile file) {
if(file==null){
return HttpStatus.BAD_REQUEST.value();
}
//获取文件名
String name=file.getOriginalFilename();
if (!file.isEmpty()) {
file.transferTo("你的存放文件地址");
}else
{
return HttpStatus.NO_CONTENT.value();
}
return HttpStatus.OK.value();
}
好了,上传单个文件就做完了。