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

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

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

image.png

可以实现乱序删除

image.png

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

首先是SpringMVC的xm需要配置下

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  
%>



  
    
    
    
    
    
    
        
    
    
    
    
    
    
    
     
     
    
    
    
    

  
  
  
    

        
简单的照片预览与批量上传
        

            

                

                    

                        
用户名：
                        

                        
 
                    
               
                    

                        
相册：
                        
 
                        
 
                    
                    

                        
删除
                        
删除
                        
删除
                    
                
            
            

                  
            
            

                实际提交相片的File组件

                


                
                
                
            
        
    
    
  

后台代码

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 imgNameList = new ArrayList();
        
        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";
        
    };
}

工具类

package com.lovo.utils;

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

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

    //校验文件类型是否是被允许的
    public static boolean allowUpload(String postfix){
        return ALLOW_TYPES.contains(postfix);
    }
}