CODEWITHSUNDEEP
javajqueryspringimage-uploadingjquery-file-upload
Srini
Srini

Reputation: 119

Image upload using ajax jquery in spring without Form submit

I am doing project in Spring java. Need to upload the image without using form submit and use only ajax call of jquery (Since i need to process back the image in the same page)

I have input tag with type=file and

I have already loaded commons-fileupload, commons-io jar in spring maven and also added multipartResolver

Now I am using below code for servlet

@RequestMapping(value = "/upload", method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> upload(@RequestParam("file") MultipartFile file) {
    Map<String, Object> map = Maps.newHashMap();
    try {
    BufferedImage src = ImageIO.read(new ByteArrayInputStream(file.getBytes()));
    File destination = new File("C:/Users/XXX/Desktop/Image_files/Image1.png");
    ImageIO.write(src, "png", destination);
    } catch(Exception e) {
        e.printStackTrace();
    }
    return map;
}

my js file

$("#uploadbutton").on("click", function() {
var oMyForm = new FormData();
oMyForm.append("file", $("#imageid").prop("files")[0]);
$.ajax({
    url: "/photo/upload/upload",
    data: oMyForm,
    processData: false,
    contentType: false,
    type: 'POST',
    success: function(response) {
        alert("success");
    },
    error: function() {
        alert("unable to create the record");
    }
});

});

The problem is I can able to select image in input type=file tag, but when i click upload button, onclick event triggers and does not make ajax call, showing the error messages "405 method not allowed", Kindly do me favour ???? Eagerly waiting the positive reply .... Any alternative way also warmly welcome

Upvotes: 1

Views: 9439

Answers (1)

The Saint
The Saint

Reputation: 416

A couple of things here. It would be helpful to see your actual HTML form declaration, including the "name" and "accept" attributes of your #imageid input. It should look something like this:

<form id="uploadForm">
     <input type="file" name="myimage" id="imageid" accept=".png" />
</form>

Secondly, in your Ajax call, it's always a good idea to have your return dataType declared. Next to that call you should always have cache set to false when uploading any type of file.

So, your declaration should look like this:

$("#uploadbutton").on("click", function() {
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
    url: "/photo/upload/upload",
    type: "POST",
    dataType: 'text',
    contentType: false,
    processData: false,
    cache: false,
    data: formData,
    success: function(response) {
        alert("success");
    },
    error: function() {
        alert("unable to create the record");
    }
});

Your controller method declaration in this case would then be:

public Map<String, Object> upload(@RequestParam("myimage") MultipartFile file) {
     //rest of the code goes here...
}

Finally, how does your CommonsMultipartResolver declaration look like in your Spring MVC XML file? It should look like this:

<bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

    <!-- one of the properties available; the maximum file size in bytes -->
    <property name="maxUploadSize" value="500000"/>

</bean>

Upvotes: 5

Related Questions