Multipart file upload using jQuery

Question

Is there any way to upload multipart file using jQuery in JSP + java. Getting error while doing in jQuery AJAX.

$.ajax({
    type: "POST",
    url: "${pageContext.request.contextPath}/users/imageUpload/" + $imageUpload + "/" + $userId‌,
    contentType: "multipart/form-data",
    processData: false,
}).done(function(data) {}).fail(function(data) {
    alert("Ooopss..! Something Bad Happened.!");
});

$.ajax({ type: "POST", url : "${pageContext.request.contextPath}/users/imageUpload/"+$imageUpload+"/"+$userId, contentType: "multipart/form-data", processData: false, }).done(function(data){ }).fail(function(data){ alert("Ooopss..! Something Bad Happened.!"); }); — Shijin Bhaskar
– Shijin Bhaskar, Commented Dec 17, 2015 at 5:17
This comment should go as update to the question. Also, share the server side code that accepts the AJAX request. — Parkash Kumar
– Parkash Kumar, Commented Dec 17, 2015 at 5:18

Parkash Kumar · Accepted Answer · 2015-12-17 05:28:22Z

7

$("input:file").change(function(objEvent) {
    var objFormData = new FormData();
    // GET FILE OBJECT 
    var objFile = $(this)[0].files[0];
    // APPEND FILE TO POST DATA
    objFormData.append('userfile', objFile);
    $.ajax({
        url: 'Here Your Server-Url'
        type: 'POST',
        contentType: false,
        data: objFormData,
        //JQUERY CONVERT THE FILES ARRAYS INTO STRINGS.SO processData:false
        processData: false,
        success: function(data) {}
    });
});

edited Dec 17, 2015 at 5:28

Parkash Kumar

4,7303 gold badges25 silver badges39 bronze badges

answered Dec 17, 2015 at 5:20

AsgarAli

2,2092 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shijin Bhaskar Over a year ago

@RequestMapping("/imageUpload/{image}/{userId}") public String formForImageUpload(Model model, @PathVariable("image") MultipartFile image, @PathVariable("userId") Integer userId ) { Users users = new Users(); model.addAttribute("users", users); return null; }

Shijin Bhaskar Over a year ago

above mentioned code is am using in java controller

Parkash Kumar Over a year ago

@Ali, Better to add some description, rather tossing up the code out there.

Shijin Bhaskar Over a year ago

How i will get the FormData in controller?

devpro · Accepted Answer · 2015-12-17 05:45:55Z

1

Try this:

var data = new FormData(document.getElementById("yourFormID")); // your form ID
var url = jQuery("#yourFormID").attr("action"); // your form action 
$.ajax({
    url: url,
    type: "POST",
    data: data, // this will get all the input fields of your form.
    enctype: 'multipart/form-data',
    processData: false,  // tell jQuery not to process the data
    contentType: false,   // tell jQuery not to set contentType
    dataType: 'json', // as you want
    success: function(response) {        
        // success 
    }
});  // JQUERY Native Ajax End

answered Dec 17, 2015 at 5:45

devpro

16.1k3 gold badges29 silver badges39 bronze badges

Collectives™ on Stack Overflow

Multipart file upload using jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related