java ajax上传头像代码_Springboot+ajax上传文件+ajax异步上传文件实现上传头像以及回显功能...

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;

}

}

头像上传

大家知道怎么图片回显了，以及一系列的图片存储以及资源重定向后，我相信头像上传就再也简单不过了。可以参考上述的请求写法。这里就不做过多的介绍了。

下面给大家展示效果

总结

大家有什么提议欢迎提出来，大家一起学习进步。有什么问题也可以提出来。

下一篇：长轮询和短轮询实现好友实时聊天，希望大家多关注哦！