利用 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="上傳" >
<input type="button" id="t_button" value="取消上傳" >

$(function () {
	    $("#button").click(function () {
	        var form = new FormData();
	        form.append("file", document.getElementById("file").files[0]);
	         $.ajax({
	             url: "/news/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;
	                	 alert(pic);
	                 	 $("#url img").attr("src",pic);
	                 	 // alert(JSON.stringify(data));
	
	                 } else {
	                 	alert("失敗");
	                 }
	                 
	             },
	             error: function (er) {          //失敗，回調函數
	            	 alert(JSON.stringify(data));
	             }
	         });
	    });
	    
	    $("#t_button").click(function () {
             //這裏分割字符串 /imctemp-rainy/157352875235607c10257539a5f4dcdaab233ca2832a5.jpg
             //需要用/分割字符先後獲取最後一段字符串去上傳到後臺
         	 //alert($("#url img").attr("src"));
         	 var img = $("#url img").attr("src");
         	 var str = img.split("/");
         	 var str_img=str[str.length-1];
		     //alert(str_img);
	         $.post("/news/deleteImages",{filePath:str_img},function(data){
	        	 alert(data);
                  //這裏我們取消上傳成功之後去給換成一個暫無圖片的一個圖
	        	 $("#url img").attr("src","/imctemp-rainy/no.jpg");
	         });
	    });
	})

控制器

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;    

  	}    
  	
  	
  	@ResponseBody //返回json數據  
  	@RequestMapping("deleteImages")
  	public String deleteImages(HttpServletRequest request) {
  		String resultInfo = null;
  	    String filePath = request.getParameter("filePath");
        //這裏是可以在控制器分割字符的一個方法
  	    //int lastIndexOf = filePath.lastIndexOf("/");
  	    //String sb = filePath.substring(lastIndexOf+1,filePath.length());
        //由於我們只獲取了圖片的名稱並沒有獲取到所有的地址，，所以我們需要去給他進行添加存放圖片的地址
  		File file = new File("D:/E/"+filePath);
  		if (file.exists()) {
			if (file.delete()) {
				resultInfo = "1-刪除成功";
			}else {
				resultInfo = "0-刪除失敗";
			}
		}else {
			resultInfo = "文件不存在！";
		}
  		return resultInfo;
  	}