SSM框架使用Layui文件上传插件实现多文件上传(多文件列表)
pom.xml文件的配置
想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入。如下:
<!--commons-fileupload --><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency><!--commons-io --><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency><!--文件上传-->
准备一个HTML页面
首先我们要下载Layui框架文件,放在我们的webapp目录下(就是和web-inf目录同级的地方即可)
在html目录之下,新建一个html页面
在文件头,我们分别导入上面下载下来的js和css文件,比如。
<link rel="stylesheet" href="../layui-v2.5.4/layui/css/layui.css" media="all">
<script src="../layui-v2.5.4/layui/layui.js"></script>
从官网的案例上,直接复制下来一个demo。如下。
<div class="container"><div class="layui-upload"><button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button><div class="layui-upload-list"><table class="layui-table"><thead><tr><th>文件名</th><th>大小</th><th>状态</th><th>操作</th></tr></thead><tbody id="demoList"></tbody></table></div><button type="button" class="layui-btn" id="testListAction">开始上传</button></div></div>
值得一提的是,layui这里并不是作为一个input来显示,我们不需要考虑加上
multiple 或者method=“POST”
这个属性,这和平常的input上传form表单提交不同。同样,我们需要将js代码给copy过来,以便我们自己修改。
<script>layui.use('upload', function(){var $ = layui.jquery,upload = layui.upload;//多文件列表示例var demoListView = $('#demoList'),uploadListIns = upload.render({elem: '#testList',url: '/hw/uploadDocs/',accept: 'file',method:'post',multiple: true,auto: false,bindAction: '#testListAction',choose: function(obj){var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列//读取本地文件obj.preview(function(index, file, result){var tr = $(['<tr id="upload-'+ index +'">','<td>'+ file.name +'</td>','<td>'+ (file.size/1014).toFixed(1) +'kb</td>','<td>等待上传</td>','<td>','<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>','<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>','</td>','</tr>'].join(''));//单个重传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('<span style="color: #5FB878;">上传成功</span>');tds.eq(3).html(''); //清空操作return delete this.files[index]; //删除文件队列已经上传成功的文件}this.error(index, upload);console.log(res);//服务器响应信息console.log(index);//当前文件的索引console.log(upload);//重新上传的方法},error: function(index, upload){var tr = demoListView.find('tr#upload-'+ index),tds = tr.children();tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传console.log(index);//当前文件的索引console.log(upload);//重新上传的方法}});});</script>
完成后台java的Controller代码
阅读官网的文档和比照js代码,我们可以知道,当上传完毕的时候,后台方法需要传给前台json字符串,里面必须包含下图标号的三个属性。我们只需要把它放在一个map里面,再使用@ResponseBody注解将其转换为json字符串即可。
控制层方法的返回值是如何转化为json格式的字符串的呢?
通过HttpMessageConverter中的方法实现的,因为它是一个接口,因此由其实现类完成转换。如果是bean对象,会调用对象的getXXX()方法获取属性值并且以键值对的形式进行封装,进而转化为json串。如果是map集合,采用get(key)方式获取value值,然后进行封装。
---------------------
作者:sunroyfcb 来源:CSDN原文:/sunroyfcb/article/details/81048675
关于js代码,里面属性的解析去查看官方文档,我这里不再赘述。
重要的是将url等重要的信息修改为自己项目的url。比如上面js中,我的代码是这样:
//多文件列表示例var demoListView = $('#demoList'),uploadListIns = upload.render({elem: '#testList',url: '/hw/uploadDocs/',accept: 'file',method:'post',multiple: true
要点:
controller里面,必须为如下一样。注意@RequestMapping中的value = "/uploadDocs"和produces="application/json;charset=utf-8"。必须将controller里面的value和js中的url相对应,另外注意自己是否修改了上面按钮控件的ID,同样也要在js代码中做修改。
@RequestMapping(value = "/uploadDocs",produces="application/json;charset=utf-8")@ResponseBodypublic Map<String,Object> uploadDocs(MultipartFile file){Map<String, Object> uploadData = new HashMap<String, Object>();String uploadDocsPath = "/Users/apple/IdeaProjects/ssmcreater/src/main/webapp/documents/";String fileName = file.getOriginalFilename();File dir = new File(uploadDocsPath,fileName);if(!dir.exists()){dir.mkdirs();}try {file.transferTo(dir);uploadData.put("code", 0);uploadData.put("msg", "上传成功");uploadData.put("data", "");} catch (IOException e) { uploadData.put("code", -1);uploadData.put("msg", "上传失败");uploadData.put("data", "");}return uploadData;}
上面注意,我把最后前台框架需要的属性都存放在了叫做uploadData的Map对象里面,最后转化为json字符串传到了前台。和ajax的用法是一模一样的。
uploadData.put("code", -1);uploadData.put("msg", "上传失败");uploadData.put("data", "");
有了前台和controller之后,我们就可以实现多文件上传。最后我这里的效果图如下。
在后台的指定目录下也有了相应的文件,这里就不再截图(已经删掉了...)。
有错误和遗落没有讲清楚的地方请留言,欢迎批评指教!