SpringMVC+zyUpload图片的批量上传

最近在项目上使用过批量上传图片，顺便给大家分享一下！！！！

首先的引入一个jar包：

 <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.2</version>
    </dependency>

下面是批量上传图片效果

Controller：

@Controller
@RequestMapping("/file/")
public class UserController {

 @RequestMapping("batchFileUpload")
    @ResponseBody
    public Map<String,Object> batchFileUpload(@RequestParam(value = "file") MultipartFile file) {
        //批量上传
        String  str = UploadAction.ajaxFileUpload(file);
        //输出文件地址
        System.out.println("地址是:"+str);
    }
}

批量上传工具类：

import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.util.*;

public  class Upload  {
    /*
    * 批量上传图片方法
    * */
    public static String batchFileUpload(MultipartFile file){
        try {
            //文件存储位置
            String path="D:/photo/";
            //这是一个访问路径(如果不配置是访问不到图片的)
            String basePath="http://192.168.0.00:8080/photo/";
            //获取文件名称
            String fileName = file.getOriginalFilename();  //prefix  suffix
            String suffix=fileName.substring(fileName.lastIndexOf("."));
            //生成新的文件名
            String newFileName= UUID.randomUUID().toString()+suffix;
            //创建文件
            File targetFile = new File(path, newFileName);
            //是否存在
            if(!targetFile.exists()){
                targetFile.mkdirs();
            }
            file.transferTo(targetFile);
            System.out.println("上传成功:"+basePath+newFileName);
            return basePath+newFileName;

        } catch (Exception e) {
            e.printStackTrace();

        }
        return "上传失败...";
    }
}

下面贴出jsp页面:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>批量上传图片DEMO</title>
    <link rel="stylesheet" href="<%=basePath%>zyupload/skins/zyupload-1.0.0.css " type="text/css">
</head>
<body>
<h1 style="text-align:center;">photo Demo</h1>
<div style="position: absolute;top: 100px; left: 20px;">
</div>
<div id="zyupload" class="zyupload"></div>
</body>
<script type="text/javascript" src="<%=basePath%>jquery-1.7.2.js"></script>
<script type="text/javascript" src="<%=basePath%>zyupload/zyupload-1.0.0.js"></script>
<script type="text/javascript">
    $(function(){
        contentPath='<%=basePath%>';
        // 初始化插件
        $("#zyupload").zyUpload({
            width            :   "650px",                 // 宽度
            height           :   "400px",                 // 宽度
            itemWidth        :   "140px",                 // 文件项的宽度
            itemHeight       :   "115px",                 // 文件项的高度
            url              :  contentPath+"/file/batchFileUpload.do",  // 上传文件的路径
            fileType         :   ["jpg","png","PNG","JPG"],// 上传文件的类型
            fileSize         :   51200000,                // 上传文件的大小
            multiple         :   true,                    // 是否可以多个文件上传
            dragDrop         :   true,                    // 是否可以拖动上传文件
            tailor           :   true,                    // 是否可以裁剪图片
            del              :   true,                    // 是否可以删除文件
            finishDel        :   true,                    // 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */
            // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
            onSelect: function(selectFiles, allFiles){
            },
            // 删除一个文件的回调方法
            onDelete: function(file){
                alert("当前删除了此文件："+file.name);
            },
            // 每文件上传成功的回调方法
            onSuccess: function(file, response){
                alert("此文件上传成功："+file.name);
                var data = JSON.parse(response);
                alert(data.rc+","+data.msg+","+data.value);
            },
            // 文件上传失败的回调方法
            onFailure: function(file, response){
                alert("此文件上传失败:"+file.name);
            },
            // 上传完成的回调方法
            onComplete: function(response){
                alert("所有文件上传完成！！！");
                var data = JSON.parse(response);
                alert(data.rc+","+data.msg+","+data.value);
            }
        });
    });
</script>
</html>

下面是js和CSS样式文件:

链接: https://pan.baidu.com/s/1hs6GWM4 密码: ic4r

如果是上传成功，访问404 ，请看下篇博客。

SpringMVC+zyUpload图片的批量上传

猜你喜欢