利用 ajax 上传图片 (Spring Boot)

效果如下：

 

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;    

  	}