SpringMVC+zyUpload图片的批量上传

来源：互联网发布：永琪干了知画编辑：程序博客网时间：2024/05/22 00:46

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

首先的引入一个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 ，请看下篇博客。

阅读全文

0 0