页面批量上传文件
前言
本文主要实现一次性批量上传文件,上传完成后页面读取,例如读取WORD、TXT文件在线转换成PDF
页面实现一次性选择多个文件批量上传主要有两个思路:
1、在页面读取多个文件后,直接通过"MultipartHttpServletRequest"在后台循环获取保存;
2、利用ajax在页面将获取的每个文件作为参数传递到后台。
提示:框架使用springboot+thymeleaf+easyUI,目前测试的转PDF格式为:DOCX、DOC、TXT
一、MultipartHttpServletRequest在后台循环获取保存
提示:html: 属性multiple=“multiple” 为选择多个文件
<form id="ff" th:action="@{/meditation/saveExpers}"
enctype="multipart/form-data" method="post">
上传文件: <input type="file" name="file" id="file" multiple="multiple" />
<input type="button" id="submitBtn" onclick="submitForm();"
value="上传文档" class="sec_btn" onclass="btn btn-primary" /> <label
style="color: red">*支持DCOX、DOC、TXT</label>
</form>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
function submitForm() {
if ($('#ff').form('validate')) {
window.top.$.messager.confirm('确认', '您确认提交该操作吗?', function(r) {
if (r) {
$("#ff").submit();
}
});
}
}
/*]]>*/
</script>
提示:controller处理
@ResponseBody
@RequestMapping("/saveExpers")
public Map<String, Object> saveExpers(Meditation exper, MultipartHttpServletRequest request)
throws IllegalStateException, IOException {
Map<String, Object> resultMap = new HashMap<String, Object>();
Iterator<String> fileNames = request.getFileNames();
while (fileNames.hasNext()) {
String fileName = fileNames.next();
List<MultipartFile> fileList = request.getFiles(fileName);
if (fileList.size() > 0) {
// 遍历文件列表
Iterator<MultipartFile> fileIte = fileList.iterator();
while (fileIte.hasNext()) {
// 获得每一个文件
MultipartFile multipartFile = fileIte.next();
meditationService.insertFileUpload(multipartFile, resultMap);//自己定义 的保存文件方法
}
}
}
return resultMap;
}
二、利用ajax后台循环读取文件存放到data中传递到后台
提示:html
<form id="ff" th:action="@{/meditation/saveExper}"
enctype="multipart/form-data" method="post">
上传文件: <input type="file" name="file" id="file" multiple="multiple" />
<input type="button" id="submitBtn" onclick="submitForm();"
value="上传文档" class="sec_btn" onclass="btn btn-primary" /> <label
style="color: red">*支持DCOX、DOC、TXT</label>
</form>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
function submitForm() {
if ($('#ff').form('validate')) {
window.top.$.messager.confirm('确认', '您确认提交该操作吗?', function(r) {
if (r) {
//$("#ff").submit();
var fileList = [];
var length =$('#file')[0].files.length;
if(length==0){
errorAlert('未选择文件!');
return false;
}
for (var i = 0; i < length; i++) {
fileList.push($('#file')[0].files[i]);
}
var formData = new FormData();
var request = new XMLHttpRequest();
//循环添加到formData中
fileList.forEach(function (file) {
formData.append('files', file, file.name);//将获取文件循环存放到data中(关键)
})
$.ajax({
type:"post",
url:[[@{/meditation/saveExper}]],
type:'post',
data: formData,
contentType: false,
processData: false,
success:function(data){
if(data.messageCode=="1"){
notice("上传成功!");
location.href=[[@{/meditation/experList}]];
}else if(data.messageCode=="0"){
errorAlert('上传失败!');
return false;
}else{
errorAlert('操作失败!');
}
}
});
}
});
}
}
/*]]>*/
</script>
提示:后台获取,因为页面已经封装完,相对于第一种方法,后台只需遍历即可,MultipartFile[ ]接收页面传递的文件
@ResponseBody
@RequestMapping("/saveExper")
public Map<String, Object> saveExper(Meditation exper, @RequestParam MultipartFile[] files) {
Map<String, Object> resultMap = new HashMap<String, Object>();
if (files.length != 0) {
for (int i = 0; i < files.length; i++) {
meditationService.insertFileUpload(files[i], resultMap);//自己定义的保存文件的方法,其中files[i]即可循环获取页面传递文件
}
}
return resultMap;
}