Springboot+ajax上传文件+ajax异步上传文件实现上传头像以及回显功能
这是我第一次在CSDN上分享自己的一些学习成果,这次我想分享一些关于头像上传功能自己的一些想法。大家有什么不同的想法欢迎下面评论。
实现功能的步骤
大体可以分为两大步骤:
1.选择图片,确定之后图片回显。
2.上传提交。
图片回显功能实现
关于表单的前端代码我就不在这里进行展示了,代码都有详细的注解。
//当改变的时候触发test()方法。
注 册
大家不要在意这个前端的from表单,重要的是,放一个用于回显图片的。
//这个方法就是ajax异步上传,test()方法
//想要ajax,记得提前导入jQuery的js文件
function test(){
var formData = new FormData($("#form1")[0]); //form1为表单的id
$.ajax({
url: "ajaxUpload",
type: "POST",
data: formData,
async: false, //异步关闭,同步完成,保证回显图片
contentType: false,
processData: false,
success: function (data) {
document.getElementById("img1").src=data;
//成功回调函数把的src属性进行改变
},
error: function (XMLHttpRequest) {
alert(XMLHttpRequest.status);
}
});
}
//这里是ajaxUpload请求的代码
// 图片回显,
// 首先要把前端异步ajax上传的图片进行判断(是否为图片)
// 其次要考虑不同浏览器导致上传图片的名字不同问题
//我下面的代码只考虑了Edge浏览器的特殊性
@RequestMapping("/ajaxUpload")
@ResponseBody
public String ajaxUpload(@RequestParam("upload") MultipartFile file, HttpServletRequest request) throws Exception
{
//获取图片的名字
String imgName=file.getOriginalFilename();
//获取Mime类型,验证是否为图片类型
String mimeType = request.getServletContext().getMimeType(imgName);
if(mimeType==null || !mimeType.contains("image")){
return "img/no.jpg"; //不是图片,直接返回默认图片
}
//判断当前请求来源于哪个浏览器
String header = request.getHeader("User-Agent"); // 获取浏览器的信息
if(header.contains("Edge")){
//Edge浏览器返回的图片名字是绝对路径,所以我们要把图片名字提取出来
imgName=imgName.substring(imgName.lastIndexOf('\\')+1, imgName.length());
}
//临时存放图片的路径
String fileName="D:/qqProjectImage/shortTime_img/";
//给图片名字加个防止重复的前缀
imgName=UUID.randomUUID().toString().replace("-","")+"_"+imgName;
//定义文件
File newFile=new File(fileName,imgName);
//清空文件的内容,因为是临时文件
//这次用到了工具类清理文件,代码下面可见
delAllFile(newFile.getParentFile().getPath());
//检测文件夹是否存在
if (!newFile.getParentFile().exists()) {
newFile.getParentFile().mkdirs();
}
//返回给前端的地址
//之所以返回这个地址,因为我配置了资源重定向,下面代码可见
String path="/shortTime_img/"+imgName;
//图片上传到文件中
file.transferTo(newFile);
return path;
}
springboot资源重定向配置
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
//资源重定向
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/shortTime_img/**").
addResourceLocations("file:/" + "D:/qqProjectImage/shortTime_img/");
registry.addResourceHandler("/longTime_img/**").
addResourceLocations("file:/" + "D:/qqProjectImage/longTime_img/");
}
}
工具类
public class FileUtils {
//此方法可以清空文件
public static boolean delAllFile(String path) {
boolean flag = false;
File file = new File(path);
if (!file.exists()) {
return flag;
}
if (!file.isDirectory()) {
return flag;
}
String[] tempList = file.list();
File temp = null;
for (int i = 0; i < tempList.length; i++) {
if (path.endsWith(File.separator)) {
temp = new File(path + tempList[i]);
} else {
temp = new File(path + File.separator + tempList[i]);
}
if (temp.isFile()) {
temp.delete();
}
if (temp.isDirectory()) {
delAllFile(path + "/" + tempList[i]);//先删除文件夹里面的文件
flag = true;
}
}
return flag;
}
}
头像上传
大家知道怎么图片回显了,以及一系列的图片存储以及资源重定向后,我相信头像上传就再也简单不过了。可以参考上述的请求写法。这里就不做过多的介绍了。
下面给大家展示效果
总结
大家有什么提议欢迎提出来,大家一起学习进步。有什么问题也可以提出来。
下一篇:长轮询和短轮询实现好友实时聊天,希望大家多关注哦!