目录主题帖传送门:Spring SpringMVC MyBatis 整合-重复的轮子造的不亦乐乎 - 简书
上一篇:JSON请求范例 - 简书
范例基于SSM框架,如何搭建移步:拉Jar包方式SSM框架搭建 - 简书
前几篇加起来解决的是处理逻辑和数据库CRUD,不管是网页还是应用后台,还有一个需求是共有的就是文件上传,本篇讲文件上传网页和Ajax方法。
主要实现了几个功能
1、单文件/多文件表单上传
2、但文件/多文件Ajax上传
在controller下创建UploadController,添加如下方法
两个方法是用于跳转到上传用HTML页面的,返回的是String,效果和ModelView设置的页面name一致


正常页面用的上传

JSON用的方法,比上面方法就是返回值不一样,备注为ResponseBody

生成服务器文件名,里面有个工具是生成文件的Md5,用于判断文件是否重复,但效率是不高的,小规模可以,大规模还是别用了。

以上Controller里面上传方法写的不好,因为我是改的单文件上传,如果多文件列表,只返回了最后一个文件上传状态,但是上传的处理还是都处理的,多文件不影响使用。
WEB-INF/view下面生成几个JSP待用
uploadSuccess和uploadView是一组,调用的是uploadView和uploadFile方法用于页面的文件上传


ajaxUploadView.jsp用于Ajax上传,返回JSON格式

需要Ajax上传文件除了Jquery还需要一个三方插件ajaxfileupload,这个插件是需要改代码的
首先Jquery可以去官网下载
ajaxfileupload基本很多都是copy的,非常感谢第一位写出这个插件并分享出来的Coder!我在这里祝你

这个插件需要修改一个地方,有可能你找到的已经改了,在createForm方法里,画圈的地方,这个方法就是传来的string转数组,遍历数组来创建文件上传的隐藏form

调用方法在ajaxUploadView.jsp里有不解释了。
最后实现的效果
网页表单上传范例效果


Ajax上传文件范例效果

后台打印

网友评论