Making an HTTP POST call with multipart/form-data using jQuery?

Question

I'm trying to make a HTTP POST call with multipart/form-data , using jQuery:

$.ajax({
  url: 'http://localhost:8080/dcs/rest',
  type: 'POST',
  contentType:'multipart/form-data',
  data: 'dcs.source=boss-web&query=data&dcs.algorithm=lingo&dcs.output.format=JSON&dcs.clusters.only=true', 
  //dataType: "jsonP",
  success: function(jsonData) {alert('POST alert'); data=jsonData ; },
  error : function(XMLHttpRequest, textStatus, errorThrown) {
            console.log('An Ajax error was thrown.');
            console.log(XMLHttpRequest);
            console.log(textStatus);
            console.log(errorThrown);
          }
});

It doesn't work. Firebug returns an undefined error and the returned XMLHttpRequst object multipart field is set to false.

What can i do to make this work with jQuery? And if it's not possible is there a simple to achieve this?

i.e. idon't need to transfer files , just some data. but the server requires multipart.

Darin Dimitrov · Accepted Answer · 2010-08-21 13:48:56Z

11

multipart/form-data doesn't look at like this:

dcs.source=boss-web&query=data&dcs.algorithm=lingo&dcs.output.format=JSON&dcs.clusters.only=true

This is application/x-www-form-urlencoded.

Here's an example of how multipart/form-data request looks like. And the related RFC 1867.

multipart/form-data is quite often associated with uploading files. If this is your case you could take a look at the jquery form plugin which allows you to ajaxify forms and supports file uploads as well.

edited Aug 21, 2010 at 13:48

answered Aug 21, 2010 at 13:27

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

Comments

NkS · Accepted Answer · 2012-10-19 09:58:37Z

1

Using FormData(), you can upload files via ajax request.

Refer this link for more info: FormData

Tutorial about using FormData: tutorial

answered Oct 19, 2012 at 9:58

NkS

1,3001 gold badge18 silver badges29 bronze badges

2 Comments

Exegesis Over a year ago

FormData is not compatible with ie8/9

naXa stands with Ukraine Over a year ago

look here for FormData in ie8/9 hack - stackoverflow.com/q/8286934/1429387

Michael come lately · Accepted Answer · 2014-08-07 16:02:25Z

-1

This way works:

$( "form#upload-form" )
    .attr( "enctype", "multipart/form-data" )
    .attr( "encoding", "multipart/form-data" );
$.ajax({ 
    type: "POST",
    contentType:attr( "enctype", "multipart/form-data" ),
    url: "/adm/oferta_insert",
    data: dados, 
    success: function( data ) { 
        alert( data );  
    }  
});

http://www.bennadel.com/blog/1273-Setting-Form-EncType-Dynamically-To-Multipart-Form-Data-In-IE-Internet-Explorer-.htm

edited Aug 7, 2014 at 16:02

Michael come lately

9,6118 gold badges70 silver badges97 bronze badges

answered Oct 8, 2012 at 13:45

gilcierweb

71 bronze badge

2 Comments

Jeremy Hicks Over a year ago

What if the data I'm trying to send isn't actually in a full-fledged form?

Jeremy Hicks Over a year ago

I get an error saying attr is not defined for the part that sets the contentType.

Collectives™ on Stack Overflow

Making an HTTP POST call with multipart/form-data using jQuery?

3 Answers 3

Comments

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Linked

Related