Bootstrap FileInput多文件上传IDEA SpringBoot+thymeleaf
最近做文件上传想把界面做好看一点，原装HTML有点丑，H5 CSS3又写不出，偶然间看到强大的Bootstrap fileinput，借鉴了很多案例搜了很多版本试了很多版本，下面是我的心路历程
1.首先下载Bootstrap fileinput
https://github.com/kartik-v/bootstrap-fileinput/
引入必要的css 和 js 注意引入顺序 zh.js是需要引用的中文
2.HTML
如果是用thymeleaf模板 有严格的语法检测
multiple = "multiple"3.js
做完以上之后我们可以看一下效果，如果没效果浏览器检查一下控制台
4.Java代码
Controller
package com.filesytem.controller;
import com.filesytem.utils.FileUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;
import java.util.*;
/**
* Created by wangluming on 2018/5/23.
*/
@Controller
@RequestMapping(value = "/upload")
public class UploadController {
private static Logger log= LoggerFactory.getLogger(UploadController.class);
Map resultMap = new LinkedHashMap();
@RequestMapping(value = "/UpLoadImage")
@ResponseBody
public Map uploadImage(HttpServletRequest request, HttpServletResponse response, @RequestParam("file") MultipartFile[] file) throws Exception{
resultMap.put("status", 400);
if(file!=null&&file.length>0){
//组合image名称，“;隔开”
List fileName =new ArrayList();
PrintWriter out = null;
try {
for (int i = 0; i < file.length; i++) {
if (!file[i].isEmpty()) {
//上传文件，随机名称，";"分号隔开
fileName.add(FileUtil.uploadImage(request, "/upload/"+ FileUtil.formateString(new Date())+"/", file[i], true));
}
}
//上传成功
if(fileName!=null&&fileName.size()>0){
System.out.println("上传成功！");
resultMap.put("status", 200);
resultMap.put("message", "上传成功！");
}else {
resultMap.put("status", 500);
resultMap.put("message", "上传失败！文件格式错误！");
}
} catch (Exception e) {
e.printStackTrace();
resultMap.put("status", 500);
resultMap.put("message", "上传异常！");
}
}else {
resultMap.put("status", 500);
resultMap.put("message", "没有检测到有效文件！");
}
return resultMap;
}
}
utils
mkdirs()这个方法可以连续创建不存在的目录 之所以加getParentFile()是因为创建路径最后的文件名也变成了文件夹package com.filesytem.utils;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;
/**
* Created by wangluming on 2018/5/24.
*/
public class FileUtil {
/**
*
* @param request
* @param path_deposit 新增目录名 支持多级不存在目录
* @param file 待文件
* @param isRandomName 是否要基于图片名称重新编排名称
* @return
*/
public static String uploadImage(HttpServletRequest request, String path_deposit, MultipartFile file, boolean isRandomName) {
//上传
try {
String[] typeImg={"gif","png","jpg"};
if(file!=null){
String origName=file.getOriginalFilename();// 文件原名称
System.out.println("上传的文件原名称:"+origName);
// 判断文件类型
String type=origName.indexOf(".")!=-1?origName.substring(origName.lastIndexOf(".")+1, origName.length()):null;
if (type!=null) {
boolean booIsType=false;
for (int i = 0; i < typeImg.length; i++) {
if (typeImg[i].equals(type.toLowerCase())) {
booIsType=true;
}
}
//类型正确
if (booIsType) {
//存放图片文件的路径
String path="D:\\QMDownload\\Hotfix\\";
System.out.print("文件上传的路径"+path);
//组合名称
String fileSrc = path+path_deposit;
//是否随机名称
if(isRandomName){
//随机名规则：文件名+_CY+当前日期+8位随机数+文件后缀名
origName=origName.substring(0,origName.lastIndexOf("."))+"_CY"+formateString(new Date())+
MathUtil.getRandom620(8)+origName.substring(origName.lastIndexOf("."));
}
System.out.println("随机文件名："+origName);
//判断是否存在目录
File targetFile=new File(fileSrc,origName);
if(!targetFile.exists()){
targetFile.getParentFile().mkdirs();//创建目录
}
//上传
file.transferTo(targetFile);
//完整路径
System.out.println("完整路径:"+targetFile.getAbsolutePath());
return fileSrc;
}
}
}
return null;
}catch (Exception e) {
e.printStackTrace();
return null;
}
}
/**
* 格式化日期并去掉”-“
* @param date
* @return
*/
public static String formateString(Date date){
SimpleDateFormat dateFormater = new SimpleDateFormat("yyyy-MM-dd");
String list[] = dateFormater.format(date).split("-");
String result = "";
for (int i=0;iMathUtil工具类
package com.filesytem.utils;
import java.security.MessageDigest;
import java.util.Random;
public class MathUtil {
/**
* 获取随机的数值。
* @param length 长度
* @return
*/
public static String getRandom620(Integer length){
String result = "";
Random rand = new Random();
int n = 20;
if(null != length && length > 0){
n = length;
}
boolean[] bool = new boolean[n];
int randInt = 0;
for(int i = 0; i < length ; i++) {
do {
randInt = rand.nextInt(n);
}while(bool[randInt]);
bool[randInt] = true;
result += randInt;
}
return result;
}
/**
* MD5 加密
* @param str
* @return
* @throws Exception
*/
public static String getMD5(String str) {
MessageDigest messageDigest = null;
try {
messageDigest = MessageDigest.getInstance("MD5");
messageDigest.reset();
messageDigest.update(str.getBytes("UTF-8"));
} catch (Exception e) {
//LoggerUtils.fmtError(MathUtil.class,e, "MD5转换异常！message：%s", e.getMessage());
}
byte[] byteArray = messageDigest.digest();
StringBuffer md5StrBuff = new StringBuffer();
for (int i = 0; i < byteArray.length; i++) {
if (Integer.toHexString(0xFF & byteArray[i]).length() == 1)
md5StrBuff.append("0").append(Integer.toHexString(0xFF & byteArray[i]));
else
md5StrBuff.append(Integer.toHexString(0xFF & byteArray[i]));
}
return md5StrBuff.toString();
}
}pom.xml
除了springboot自己的依赖 这是我额外的 我springboot版本是1.5.3.RELEASE
org.slf4j
slf4j-api
1.7.7
net.sf.json-lib
json-lib
2.4
jdk15
最后运行结果
