SpringBoot图片上传(一)
简单描述：点击上传文件的图标，上传文件，上传成功后，图标编程上传的图片。
吐槽：文件上传下载这种东西，总是感觉莫名的虚-_-|| 也不知道是造了什么孽，(其实就是IO File这一块的知识了解的不太深入)。
代码：
//html代码
<div class="col-md-6">
<label class="control-label flex" style="margin-top: 10px;">
上传图标<span class="star align-items">*</span>
</label>
<div class="">
<img th:src="@{/assets-new/apps/img/shangchuan.png}" id="imgPlanIcon"
width="35px" height="35px"/>
<input type="file" id="seledIcon" style="display:none"/>
</div>
<input type="hidden" name="planIcon" th:value="${plan?.planIcon}" id="planIcon"/>
</div>
//js代码
$("#imgPlanIcon").on("click", function () {
$("#seledIcon").trigger("click");
});
//此js要放到初始化下，否则中间的file不会被识别，checkFile()是否初始化都无所谓
$("#seledIcon").on("change", function () {
if ($('#seledIcon').val().length == 0) {
return;
}
// 前端判断选择的文件是否符合要求
if (!checkFile()) {
// 重置file input
$('#seledIcon').replaceWith($('#seledIcon').val('').clone(true));
return;
}
// 上传图片到项目临时目录下
var url = rootPath + "serv/plan/upLoadImage";
var icon = $('#seledIcon')[0].files[0];
var fd = new FormData();
fd.append('icon', icon);
$.ajax({
url: url,
type: "post",
//Form数据
data: fd,
cache: false,
async: false,
contentType: false,
processData: false,
success: function (data) {
if (data.result == "success") {
// 上传成功data为图片路径
var planIcon = data.fileName;
$('#planIcon').val(planIcon);
//下边两行代码用于回显上传成功后的图标
var imgPlanIcon = rootPath + 'serv/plan/downLoadImage?planIcon=' + planIcon;
$('#imgPlanIcon').attr('src', imgPlanIcon);
} else if (data.result == "fileIsEmpty") {
layer.msg("图片内容为空！");
} else if (data.result == "formatError") {
layer.msg("请检查图片格式是否为jpg！");
} else if (data.result == "sizeTooBig") {
layer.msg("图片大小超出512KB！");
} else if (data.result == "sizeError") {
layer.msg("图片尺寸必须为60*60！");
} else {
layer.msg("上传图片失败");
}
},
error: function () {
layer.msg("上传图片失败，后台系统故障");
}
});
// 重置file input
$('#seledIcon').replaceWith($('#seledIcon').val('').clone(true));
});
function checkFile() {
var maxsize = 512 * 1024;
var errMsg = "图片大小超出512KB！！！";
var browserCfg = {};
var ua = window.navigator.userAgent;
if (ua.indexOf("MSIE") >= 1) {
browserCfg.ie = true;
} else if (ua.indexOf("Firefox") >= 1) {
browserCfg.firefox = true;
} else if (ua.indexOf("Chrome") >= 1) {
browserCfg.chrome = true;
}
var obj_file = $('#seledIcon')[0];
var fileSize = 0;
var fileType;
if (browserCfg.firefox || browserCfg.chrome) {
fileSize = obj_file.files[0].size;
if (fileSize > maxsize) {
layer.msg(errMsg);
return false;
}
var fileName = obj_file.files[0].name;
fileType = fileName.slice(fileName.lastIndexOf(".") + 1).toLowerCase();
if (fileType != "jpg") {
layer.msg("请检查图片格式是否为jpg！");
return false;
}
} else if (browserCfg.ie) {
// ie浏览器，获取不到filesize，暂时通过前台验证，转到后台处理
} else {
// 其它类型的浏览器，暂时通过前台验证，转到后台处理
}
return true;
}
//后台java代码
//Controller中要声明路径
@Value("${constant.image_path}")
private String imagePath;
@Value("${constant.image_temp_path}")
private String imageTempPath;
@RequestMapping("/upLoadImage")
@ResponseBody
public Map<String, String> uploadFile(MultipartFile icon) throws Exception {
HashMap<String, String> map = new HashMap<>();
if (icon == null || icon.isEmpty()) {
map.put("result", "fileIsEmpty"); // 文件或内容为空
return map;
}
// 判断图片的格式是否符合要求
String fileName = icon.getOriginalFilename(); // 上传的文件名
String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
if (!"jpg".equals(suffix)) {
map.put("result", "formatError"); // 文件格式错误
return map;
}
BufferedImage image = ImageIO.read(icon.getInputStream());
if (image == null) {
map.put("result", "formatError"); // 文件格式错误
return map;
}
// 判断图片的大小是否符合要求
Long iconSize = icon.getSize() / 1024;
if (iconSize > 512) {
map.put("result", "sizeTooBig"); // 图片超出指定大小
return map;
}
// 判断图片的尺寸是否符合要求
int width = image.getWidth();
int height = image.getHeight();
if (width != 60 || height != 60) {
map.put("result", "sizeError"); // 图片尺寸不合适
return map;
}
File dirPath = new File(imageTempPath);
// 判断文件夹是否存在
if (!dirPath.exists()) {
dirPath.mkdirs();
}
// 生成新的文件名称
String uuid = UuidUtil.get32UUID();
String newFileName = uuid + "." + suffix;
// 将上传文件保存到一个目标文件中
icon.transferTo(new File(imageTempPath + File.separator + newFileName));
map.put("result", "success");
map.put("fileName", newFileName);
return map;
}
@RequestMapping("/downLoadImage")
public void downLoadFile(String planIcon, HttpServletResponse response) {
if (Tools.isEmpty(planIcon)) {
return;
}
File file = null;
file = new File(imagePath + File.separator + planIcon);
if (!file.exists()) {
file = new File(imageTempPath + File.separator + planIcon);
}
if (file.exists()) {
BufferedInputStream in = null;
BufferedOutputStream out = null;
try {
in = new BufferedInputStream(new FileInputStream(file));
out = new BufferedOutputStream(response.getOutputStream());
// 设置response内容的类型
response.setContentType(new MimetypesFileTypeMap().getContentType(file));
// 设置头部信息
response.setHeader("Content-disposition", "attachment;filename=" + planIcon);
byte[] buffer = new byte[1024];
int length = 0;
while ((length = in.read(buffer)) > 0) {
out.write(buffer, 0, length);
}
out.flush();
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
if (in != null) {
in.close();
}
if (out != null) {
out.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
//constant.properties配置
# 上传图标的存放路径
constant.image_path=D:\\image\\icon
# 上传图标的临时存放路径
constant.image_temp_path=D:\\image\\temp
总结
