1500字范文 > SSM框架使用Layui文件上传插件实现多文件上传（多文件列表）

SSM框架使用Layui文件上传插件实现多文件上传（多文件列表）

时间：2023-11-29 14:09:01

pom.xml文件的配置

想要实现SSM框架实现多文件上传，必要的jar包必须要在pom.xml文件中引入。如下：

<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency>

准备一个HTML页面

首先我们要下载Layui框架文件，放在我们的webapp目录下（就是和web-inf目录同级的地方即可）

在html目录之下，新建一个html页面

在文件头，我们分别导入上面下载下来的js和css文件，比如。

从官网的案例上，直接复制下来一个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过来，以便我们自己修改。

完成后台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之后，我们就可以实现多文件上传。最后我这里的效果图如下。

在后台的指定目录下也有了相应的文件，这里就不再截图（已经删掉了...）。

有错误和遗落没有讲清楚的地方请留言，欢迎批评指教！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。