SpringMVC批量上传图片，实现上传前图片预览

最新推荐文章于 2019-05-07 15:35:35 发布

大啵鱼

最新推荐文章于 2019-05-07 15:35:35 发布

阅读量655

点赞数

分类专栏： sping mvc

sping mvc 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的批量图片上传及预览功能实现方案，包括前端界面设计与交互逻辑、后端处理流程以及文件类型检查工具类的编写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近有个功能需要实现批量上传图片，然后实现图片预览，因为项目比较老，同时对界面和用户操作体验也要求不太高，就没去找网上的开源插件，直接写了个简单的功能，这里做个记录备份

因为这个是实验性的小代码，就没做太多的验证和界面调整

这里写图片描述

可以实现乱序删除

这里写图片描述

这就是简单的功能界面，下面就是代码

首先是SpringMVC的xm需要配置下


    <!-- 配置MultipartResolver 用于文件上传 使用spring的CommosMultipartResolver 说明： p:defaultEncoding="UTF-8"：这里设置默认的文件编码为UTF-8，必须与用户JSP的默认编码一致； 
        p:maxUploadSize="5000000"：指定文件上传大小，单位为字节； p:uploadTempDir="fileUpload/temp"：文件上传临时目录，上传完成后，就会将临时文件删除； -->
    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
        p:defaultEncoding="UTF-8" p:maxUploadSize="5000000" p:uploadTempDir="fileUpload/temp">
    </bean>1
2
3
4
5
6
7

JSP+js

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
response.setHeader("Cache-Control","no-store");//HTTP 1.1  
response.setHeader("Pragma","no-cache");//HTTP 1.0  
response.setDateHeader("Expires",0);//prevents caching at the proxy server  
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'batchFileUpload.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <link rel="stylesheet" type="text/css" href="<%=basePath%>static/css/webuploader.css"/>
    <script type="text/javascript" src="<%=basePath%>static/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/ajaxfileupload.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/bootstrap.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/jquery.json-2.4.js" charset="UTF-8"></script> 
    <script type="text/javascript" src="<%=basePath%>static/js/jquery.validate.js"></script> 
    <script type="text/javascript" src="<%=basePath%>static/js/jquery.Jcrop.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/webuploader.nolog.js"></script>

    <script type="text/javascript">
        $(function(){
            //动态打开file标签
            $("#changeImg").click(function(){
                var files = document.getElementsByName("file");
                for(var i = 0;i<files.length;i++)
                {
                    if($(files[i]).val()=='')
                    {
                        $(files[i]).click();
                        break;
                    }
                }
            });
        }); 

        //预览图事件
        function readURL(preFile,markId){
            var reader = new FileReader();
            reader.readAsDataURL(preFile.files[0]); 
            reader.onload = function(e){
                //循环判断为空
                var preImges = document.getElementsByName("preImg");
                for(var i =0;i<preImges.length;i++){
                    if($(preImges[i]).attr("src")==''){
                        $(preImges[i]).removeAttr("src");
                        $(preImges[i]).removeAttr("markId");
                        $(preImges[i]).attr("src",e.target.result);
                        $(preImges[i]).attr("markId",markId);
                        break;
                    }
                }


            }

        }

        //删除预览图事件
        function deletePre(preId){
            $("#"+preId).removeAttr("src");
            $("#"+preId).attr("src",'');
            var tempMark = $("#"+preId).attr("markId");
            $("#"+tempMark).val('');
        }
    </script>

  </head>

  <body>
    <div style="margin-left: 35%;margin-top: 10%">
        <div  style="margin-left:5%;margin-top: 10%">简单的照片预览与批量上传</div>
        <form action=""  method="post" enctype="multipart/form-data" id = "imgFile">
            <table cellpadding="10px" cellspacing="10px">
                <tbody>
                    <tr>
                        <td>用户名：</td>
                        <td><input id="userName" name = "userName" type="text"></td>
                        <td>&nbsp;</td>
                    </tr>               
                    <tr>
                        <td>相册：</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td><img alt="相片1" src="" style="width: 100px" id="preImg_1" name ="preImg"><a href="javascript:void(0);"onclick="deletePre('preImg_1')">删除</a></td>
                        <td><img alt="相片2" src="" style="width: 100px" id="preImg_2" name ="preImg"><a href="javascript:void(0);"onclick="deletePre('preImg_2')">删除</a></td>
                        <td><img alt="相片3" src="" style="width: 100px" id="preImg_3" name ="preImg"><a href="javascript:void(0);"onclick="deletePre('preImg_3')">删除</a></td>
                    </tr>
                </tbody>
            </table>
            <div  style="margin-left:8%;margin-top:5%">
                <input type="button" value = "选择图片" id="changeImg">&nbsp;&nbsp;<input type="submit" value ="     提  交     ">
            </div>
            <div>
                <span>实际提交相片的File组件</span><br>
                <br><br>
                <input type="file" id = "fileId_1" name="file" onchange="readURL(this,'fileId_1')">
                <input type="file" id = "fileId_2" name="file" onchange="readURL(this,'fileId_2')">
                <input type="file" id = "fileId_3" name="file" onchange="readURL(this,'fileId_3')">
            </div>
        </form>

    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

后台代码

package com.lovo.controller;

import java.io.File;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import com.lovo.utils.FileUploadCheck;

@Controller
public class batchImgController {

    private static Logger logger = Logger.getLogger(batchImgController.class);

    @RequestMapping(value = "/batchImg.do",method = RequestMethod.GET)
    public String batchImgGet(){
        //get方法，处理jsp跳转前的一些验证和准备

        return "batchFileUpload";

    }

    /**
     * 图片批量提交方法
     * @param userName
     * @param file
     * @return
     */
    @RequestMapping(value = "/batchImg.do",method = RequestMethod.POST)
    public String batchImgPost(@RequestParam("userName") String userName,@RequestParam("file")MultipartFile[] file ,HttpServletRequest request){

        //表单基本信息
        System.out.println(userName);

        // 文件保存路径  
        String filePath = request.getSession().getServletContext().getRealPath("/") + "fileUpload/";
        //储存文件名或文件路径
        List<String> imgNameList = new ArrayList<String>();

        try {
            for (MultipartFile img : file)
            {
                if(!img.isEmpty())
                {
                    //文件重命名
                    Date day = new Date();
                    SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
                    String newName = sdf.format(day)+System.currentTimeMillis()+".jpg";

                    //方法判定是否为图片
                    if(FileUploadCheck.allowUpload(img.getContentType()))
                    {
                        img.transferTo(new File(filePath+newName));

                        //存储文件的新名字，之后根据项目情况对文件进行入库，并把实体文件上传到FTP
                        imgNameList.add(newName);
                    }

                }
            }
        } catch (Exception e) {
            logger.error("文件上传失败");
        }

        return "batchFileUpload";

    };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

工具类

package com.lovo.utils;

import java.util.Arrays;
import java.util.List;

public class FileUploadCheck {

    //支持的文件类型
    public static final List<String> ALLOW_TYPES = Arrays.asList("image/jpg","image/jpeg","image/png","image/gif");

    //校验文件类型是否是被允许的
    public static boolean allowUpload(String postfix){
        return ALLOW_TYPES.contains(postfix);
    }
}本文出处http://blog.youkuaiyun.com/harry_zh_wang/article/details/75213119