zyUpload结合SpringMVC实现批量图片的上传

最新推荐文章于 2018-07-14 16:31:00 发布

阿尔巴斯

最新推荐文章于 2018-07-14 16:31:00 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Java EE基础文章标签： spring mvc 图片 zyUpload 批量上传

本文链接：https://blog.youkuaiyun.com/sunguoqingufo/article/details/50681989

本文介绍了如何结合zyUpload插件和SpringMVC框架实现在网页上批量上传图片的功能。首先在jsp页面引入必要的css和js文件，然后调用js函数展示上传界面。通过创建一个图片保存类，实现文件保存到指定路径。最后，配置SpringMVC控制器处理文件上传请求，完成图片的批量保存。示例展示了具体的代码实现和实际效果。

zyUpload是一款优秀的图片批量上传插件，浏览器兼容性强，应用方便便捷，特别适用于批量图片（当然不仅仅支持图片）文件的上传。这里我结合自己开发的一个例子，讲解下zyUpload结合SpringMVC实现图片的批量上传。网上有另外一种方式实现，那就是基于serverlet实现，由于这种方式我没有用到，所以这里就不进行说明，有需要的同学查看这里(http://52doit.com/doit/show/341)，并且有提供源码，感谢这位同学。

一、jsp页面代码
首先jsp页面引入相关的css和js文件，代码如下：

<head>
<link rel="stylesheet" href="${ctxStatic}/plugins/zyupload/skins/zyupload-1.0.0.min.css " type="text/css">
<script type="text/javascript" src="${ctxStatic}/plugins/zyupload/zyupload.basic-1.0.0.min.js"></script>
</head>

接着，调用相关的js函数，实现上传图形界面的显示，代码如下：

<script type="text/javascript">
            $(function(){
    
    
                // 初始化插件
                $("#zyupload").zyUpload({
                    width            :   "800px",                 // 宽度
                    height           :   "450px",                 // 高度
                    itemWidth        :   "130px",                 // 文件项的宽度
                    itemHeight       :   "115px",                 // 文件项的高度
                    addImgUrl        :   "${ctxStatic}/plugins/", //新增文件图片路径
                    url              :   "${ctx}/jcsl/uploadBat?uuid=${uuid}&jcxid=${jcxid}",  // 上传文件的路径
                    fileType         :   ["jpg","png","jpeg"],// 上传文件的类型
                    fileSize         :   5120000