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

效果如下：

1.启动类中加入

SpringBoot重写addResourceHandlers映射文件路径

1. @Override
2. public void addResourceHandlers(ResourceHandlerRegistry registry) {
3. registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:D:/E/");
4. }

设置静态资源路径

2.   表单 前端 页面

1. <input type="file" name="file" id="file">
2. <p id="url"><img src="" width=200></p>
3. <input type="button" id="button" value="上传" >
4. $(function () {
5. $("#button").click(function () {
6. var form = new FormData();
7. form.append("file", document.getElementById("file").files[0]);
8. $.ajax({
9. url: "/stu/upload", //后台url
10. data: form,
11. cache: false,
12. async: false,
13. type: "POST", //类型，POST或者GET
14. dataType: 'json', //数据返回类型，可以是xml、json等
15. processData: false,
16. contentType: false,
17. success: function (data) { //成功，回调函数
18. if (data) {
19. var pic="/imctemp-rainy/"+data.fileName;
20. $("#url img").attr("src",pic);
21. // alert(JSON.stringify(data));
22. } else {
23. alert("失败");
24. }
25. },
26. error: function (er) { //失败，回调函数
27. alert(JSON.stringify(data));
28. }
29. });
30. })
31. })

控制器

1. public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {
2. File targetFile = new File(filePath);
3. if (!targetFile.exists()) {
4. targetFile.mkdirs();
5. }
6. FileOutputStream out = new FileOutputStream(filePath +"/"+ fileName);
7. out.write(file);
8. out.flush();
9. out.close();
10. }
11. //处理文件上传
12. @ResponseBody //返回json数据
13. @RequestMapping(value = "upload", method = RequestMethod.POST)
14. public JSONObject uploadImg(@RequestParam("file") MultipartFile file,HttpServletRequestrequest) {
15. String contentType = file.getContentType();
16. System.out.print(contentType);
17. String fileName = System.currentTimeMillis()+file.getOriginalFilename();
18. String filePath = "D:/E";
19. JSONObject jo = new JSONObject();//实例化json数据
20.  
21. if (file.isEmpty()) {
22. jo.put("success", 0);
23. jo.put("fileName", "");
24. }
25. try {
26. uploadFile(file.getBytes(), filePath, fileName);
27. jo.put("success", 1);
28. jo.put("fileName", fileName);
29. // jo.put("xfileName", filePath+"/"+fileName);
30. } catch (Exception e) {
31. // TODO: handle exception
32.  
33. }
34.  
35. //返回json
36. return jo;
37. }

总结

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