基于Spring Boot利用 ajax实现上传图片功能

效果如下：

1.启动类中加入

SpringBoot重写addResourceHandlers映射文件路径

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler(\”/imctemp-rainy/**\”).addResourceLocations(\”file:D:/E/\”);
}

设置静态资源路径

2. 表单前端页面

<input type=\”file\” name=\”file\” id=\”file\”>
<p id=\”url\”><img src=\”\” width=200></p>
<input type=\”button\” id=\”button\” value=\”上传\” >
$(function () {
$(\”#button\”).click(function () {
var form = new FormData();
form.append(\”file\”, document.getElementById(\”file\”).files[0]);
$.ajax({
url: \”/stu/upload\”, //后台url
data: form,
cache: false,
async: false,
type: \”POST\”, //类型，POST或者GET
dataType: \’json\’, //数据返回类型，可以是xml、json等
processData: false,
contentType: false,
success: function (data) { //成功，回调函数
if (data) {
var pic=\”/imctemp-rainy/\”+data.fileName;
$(\”#url img\”).attr(\”src\”,pic);
// alert(JSON.stringify(data));
} else {
alert(\”失败\”);
}
},
error: function (er) { //失败，回调函数
alert(JSON.stringify(data));
}
});
})
})

控制器

public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {
File targetFile = new File(filePath);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
FileOutputStream out = new FileOutputStream(filePath +\”/\”+ fileName);
out.write(file);
out.flush();
out.close();
}
//处理文件上传
@ResponseBody //返回json数据
@RequestMapping(value = \”upload\”, method = RequestMethod.POST)
public JSONObject uploadImg(@RequestParam(\”file\”) MultipartFile file,HttpServletRequest request) {
String contentType = file.getContentType();
System.out.print(contentType);
String fileName = System.currentTimeMillis()+file.getOriginalFilename();
String filePath = \”D:/E\”;
JSONObject jo = new JSONObject();//实例化json数据

if (file.isEmpty()) {
jo.put(\”success\”, 0);
jo.put(\”fileName\”, \”\”);
}
try {
uploadFile(file.getBytes(), filePath, fileName);
jo.put(\”success\”, 1);
jo.put(\”fileName\”, fileName);
// jo.put(\”xfileName\”, filePath+\”/\”+fileName);
} catch (Exception e) {
// TODO: handle exception

}

//返回json
return jo;
}

总结

以上所述是小编给大家介绍的基于Spring Boot利用 ajax实现上传图片功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对悠久资源网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章: