java Springboot实现多文件上传功能

java Springboot实现多文件上传功能

前端采用layui框架，讲解多文件上传的完整实现功能。

前端html重点代码如下：

上传文件

选择多文件

开始上传

相应的，js代码如下所示：

layui.use('upload', function(){

var $ = layui.jquery,upload = layui.upload;

//多文件列表示例

var demoListView = $('#demoList')

,uploadListIns = upload.render({

elem: '#testList'

,url: '/upload'

,accept: 'file'

,data:{} //可放扩展数据 key-value

,multiple: true

,auto: false

,bindAction: '#testListAction'

,choose: function(obj){

var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列

//读取本地文件

obj.preview(function(index, file, result){

var tr = $(['

,'

,'

,'

,'

,'重传'

,'删除'

,'

,'

//单个重传

tr.find('.demo-reload').on('click', function(){

obj.upload(index, file);

});

//删除

tr.find('.demo-delete').on('click', function(){

delete files[index]; //删除对应的文件

tr.remove();

uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选

});

demoListView.append(tr);

});

}

,done: function(res, index, upload){

if(res.code == 0) //上传成功

var tr = demoListView.find('tr#upload-'+ index)

,tds = tr.children();

tds.eq(2).html('上传成功');

tds.eq(3).html(''); //清空操作

return delete this.files[index]; //删除文件队列已经上传成功的文件

} //code为后台传回来的数据，具体多少自己定，

//后台只能传回json格式数据，不然会走error函数；

,error: function(index, upload){

}

})

});

以上即是前端功能的实现，后端方面，在Service层Impl下创建文件上传的函数：

public String uploadNoticeFile(MultipartFile fileList) {

try{

String pathname = filepath;

String timeMillis = Long.toString(System.currentTimeMillis());//时间戳

String filename = timeMillis + fileList.getOriginalFilename();

File dir = new File(pathname);

if (!dir.exists()) {

dir.mkdirs();

}

String filepath = pathname + filename;

File serverFile = new File(filepath);

fileList.transferTo(serverFile);

//存入数据库

NoticeFile noticeFile = new NoticeFile();

noticeFile.setNoFileName(filename);

noticeFile.setNoFilePath(filepath);

noticeFile.setNoId(0L);

noticeFileRepository.save(noticeFile);

return "1";

}catch (Exception e) {

e.printStackTrace();

return "0";

}

}

NoticeFile是我个人在写项目时创建的类，读者可根据实际情况自行运用。

然后，在controller层中创建相应的函数：

@RequestMapping(value = "/upload", method = RequestMethod.POST)

@ResponseBody

public Map noticeFile(@RequestParam(name = "file") MultipartFile files) {

String msg = noticeFileService.uploadNoticeFile(files);

Map map = new HashMap();

if (msg == "1") {

map.put("code", "0");

} else {

map.put("code", "1");

}

return map;

}

以上，即实现了多文件上传的全部功能。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。