Spring MVC + AJAX + Jquery ajax callback to success function is not working

快来打我* 2022-08-11 19:29 127阅读 0赞

There is some problem with callback function of Ajax by returning string value from Spring Controller. I want the image to be uploaded asynchronously, Upload is successful but the page is redirecting to the another page and the callback function is not called.

JSP: image-upload.jsp

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>some title</title>
    
    
    <script src="<c:url value="/resources/scripts/jquery.js" />"></script>
    
    
    <link rel="stylesheet" href="<c:url value="/resources/css/jquery-ui.css" />">
    <script src="<c:url value="/resources/scripts/jquery-ui.js" />"></script>
    
    
    <script type="text/javascript">
    
        $(document).ready(function(){       
    
            $("#popsave").click(function(e){
                    $.ajax({
                    url: $("#uploadform").attr( "action"),
                    data: {fileToUpload : formData},
                    type: 'POST',
                    cache: false,
                    processdata: false,
                    contentType : false,
                    async: true,
                    dataType: "json",
                    mimeType: "application/json", 
                    success: function(data){
                        alert(JSON.stringify(data));
                    },
                    error: function(){
                        alert("something went wrong");
                      }
                });
                e.preventDefault();
                return false;
    
            });
    
        });  
    
    
    </script>
    
    </head>
    
    <body> 
            
    
              <form method="post" action="/SampleUpload/uploadfile" id="uploadform" enctype="multipart/form-data">
                <input type="file" name="fileToUpload" id="fileToUpload" />
                <table style="align:center;"><tr><td><input id="popsave" type="submit" value="Save" /></td><td><input id="cancelBtn" type="button" value="cancel"/></td></tr></table>
                <img id="cancelpop" style="width:20px;height:20px;position: absolute;top:-15px;right:-15px;" src="<c:url value='/resources/images/cancel.png'/>"  alt="cancel"/>
              </form>
    
    
    </body>
    </html>

My Controller:

@RequestMapping(value = "/uploadfile", method = RequestMethod.POST) 
    public @ResponseBody String uploadImage(HttpServletRequest request, @RequestParam(value = "fileToUpload") MultipartFile image) throws IOException {
                String fileName = image.getOriginalFilename();  
                String imageurl = "";
                try {
                    if(fileName != ""){
                    String path = (String) request.getSession().getServletContext().getRealPath("/");
                    String rndfilename = RandomStringUtils.randomAlphanumeric(20);
                    File file = new File(path+"resources/tempuploads/"+ rndfilename + fileName);
    
                    imageurl = path+"resources/tempuploads/"+ rndfilename + fileName;
                    fileName = file.toString();
                    FileUtils.writeByteArrayToFile(file, image.getBytes());
                    System.out.println("Go to the location:  " + file.toString()
                            + " on your computer and verify that the image has been stored.");
                    }
                } catch (IOException e) {
                    throw e;
                }
    
                return imageurl;
            }

The "imageurl" should be returned to my current jsp page(image-upload.jsp) and have to show an alert msg. But it is showing the "imageurl" on the other page (showing on the URL which we have called in ajax i.e [http://www.test.com/SampleUpload/uploadfile][http_www.test.com_SampleUpload_uploadfile]). There is no page with name 'uploadfile'. I have tried different ways but didn't worked. Please help me to fix it ( I want to return the image url to our ajax callback function and have to show alert msg in the same page and the page shouldn't be reloaded or refreshed or redirected). I am also using Spring security in my application.

Answer:

Remove the action attribute from the form, and directly give URL in your ajax call.

[http_www.test.com_SampleUpload_uploadfile]: http://www.test.com/SampleUpload/uploadfile