基于Spring Boot利用 ajax实现上传图片功能
时间:2020-02-03来源:电脑系统城作者:电脑系统城
效果如下:
![](/d/file/biancheng/AJAX/2020-02-03/7f43ed0426c9633d06a892d82a9217ac.png)
![](/d/file/biancheng/AJAX/2020-02-03/50dfb7cd856bb8aaa24bdaf654016629.png)
1.启动类中加入
![](/d/file/biancheng/AJAX/2020-02-03/4baa940e25f2b0d3da3a3d9e1404e54f.png)
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,HttpServletRequestrequest) {
- 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实现上传图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关信息
-
-
Ajax提交post请求案例分析
这篇文章主要介绍了Ajax提交post请求,结合具体案例形式分析了ajax提交post请求相关原理、用法及操作注意事项...
2020-02-03