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

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

image.png

可以实现乱序删除

image.png

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

首先是SpringMVC的xm需要配置下

class="org.springframework.web.multipart.commons.CommonsMultipartResolver"

p:defaultEncoding="UTF-8" p:maxUploadSize="5000000" p:uploadTempDir="fileUpload/temp">

JSP+js

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

%>

My JSP 'batchFileUpload.jsp' starting page

$(function(){

//动态打开file标签

$("#changeImg").click(function(){

var files = document.getElementsByName("file");

for(var i = 0;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

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('');

}

后台代码

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);

}

}