最近需要图片批量拖拽上传,记录一下下。我的项目使用的是SSM框架。
需要的jar包
<!-- 上传下载需要设计到的jar包 -->
<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
SpringMVC.xml中的配置
<!-- 定义文件上传解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 设定默认编码 -->
<property name="defaultEncoding" value="UTF-8"></property>
<!-- 设定文件上传的最大值31MB,31*1024*1024 -->
<property name="maxUploadSize" value="32505856"></property>
<!-- 其他的大家可以自行配置,不影响主功能-->
</bean>
Controller层的代码 :Msg实体类是我返回结果自己建的,用户ajax请求返回json数据
@RequestMapping(value = "/uploadPicture")
public @ResponseBody
Msg uploadPicture(@RequestParam(value = "file") MultipartFile[] files, HttpServletRequest request)
throws IOException {
if (files != null && files.length != 0) {
for (int i = 0; i < files.length; i++) {
MultipartFile file = files[i];
UploadUtils.upload(request, file);
}
}
return Msg.success("上传成功");
}
UploadUtil实体类:
package cn.wannengde.toolkit.tool;
import org.apache.commons.io.FilenameUtils;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.UUID;
/*
@author
@date 2019/5/6 - 11:30
*/
public class UploadUtils {
public static String upload(HttpServletRequest request, MultipartFile file) throws IOException {
String imgPath = null; // 存储装配后的地址
if(file != null && !file.isEmpty()){
//使用UUID给图片重命名,并去掉生成的四个"-"
String name = UUID.randomUUID().toString().replace("-","");
//获得文件的扩展名
String ext = FilenameUtils.getExtension(file.getOriginalFilename());
//根据项目真实路径设置图片的上传路径
String url = request.getSession().getServletContext().getRealPath("/upload");
//检验文件夹是否存在,如果不存在会自动建立
isFolderExists(url);
// 以绝对路径保存重名命后的图片
file.transferTo(new File(url + "/" + name + "." + ext));
// 装配图片地址
imgPath = "upload/" + name + "." + ext;
}
return imgPath;
}
/**
* 验证文件夹是否存在,如果不存在自动建立
*
* @param strFolder
* @return
*/
public static boolean isFolderExists(String strFolder) {
File file = new File(strFolder);
if (!file.exists()) {
if (file.mkdir()) {
return true;
} else {
return false;
}
}
System.out.println("-----------------文件上传路径:" + strFolder);
return true;
}
}
前端页面:使用的是Jquery插件实现的,插件其中可能有很多坑,我踩中了两个,还有一个就是插件中的CSS中利用了
imagesUploadContent这个class来设置,如果要改需要去对应CSS里面去改改。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<head>
<meta charset="utf-8">
<title>上传图片</title>
<link href="${APP_PATH}/static/css/iconfont.css" rel="stylesheet" />
<link href="${APP_PATH}/static/css/imagesUpload.css" rel="stylesheet" />
</head>
<body>
<div class="imagesUploadContent" id="imagesUploadContent">
<!--
<div class="uploadBtns">
<ul>
<li><div class="selectFileBtn">选择文件</div></li>
<li><div class="uploadFileBtn"><i class="iconfont icon-shangchuan"></i></div></li>
<li><div class="deleteFileBtn"><i class="iconfont icon-shanchu"></i></div></li>
</ul>
</div>
<div class="box">
<div class="fileItem" fileCodeId="0">
<div class="imgShow">
<img src="christmas_4x.png" width="150" height="150" />
</div>
<div class="status"><i class="iconfont icon-close"></i></div>
//<div class="status"><i class="iconfont icon-right"></i></div>
<div class="fileName">图片名</div>
</div>
</div>
<input type="file" id="fileSelectInput" class="fileSelectInput" />
-->
</div>
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${APP_PATH}/static/js/imagesUpload.js"></script>
<script type="text/javascript">
$(".imagesUploadContent").initUpload({
fileType:"*", //文件类型 , 默认所有文件
fileMaxNum:3, //文件最大数量 , 默认没有限制
fileMaxSize:1000, //单个文件最大大小 , 默认没有限制
fileSavePath : "da",
uploadUrl:"${APP_PATH}/uploadPicture"
});
/*
var initOption={
"uploadId":uploadId,
"uploadUrl":"#", //上传地址
"fileType":"*", //文件类型
"fileMaxNum":-1, //文件最大数量:-1为没有限制 ,必须为整数
"fileMaxSize":-1, //单个文件最大大小:-1为没有限制, 单位kb
"canDrag":true, //文件是否可拖拽
"isHiddenUploadBtn":false, //是否隐藏上传按钮 , 默认为不隐藏
"isHiddenCleanBtn":false, //是否隐藏清除按钮 , 默认为不隐藏
"ismultiple":true, //是否可以选择多文件
"isAutoClean":true, //是否上传后自动完成清除
"fileSavePath":"", //文件上传后后台设置的根目录
"uploadSuccess":function(){}, //上传成功后的回调函数
"uploadFalse":function(){}, //上传失败后的回调函数
}
*/
</script>
</body>
</html>
插件位置
链接: https://pan.baidu.com/s/1hgpAmcKIcG0IFiLiS3NUrg 提取码: mfuv