Using AJAX to Send Multipart Form

In my continuing detailed blogs in reference to Issues when trying to use multipart form data with jquery ajax forms, I want to talk about using AJAX to send Multipart forms. Although you might think that sending multipart data is the akin to sending data using Jquery and web.api, you would be very wrong. In many ways it is more difficult. In the simplest explanation, processing a multipart form is like building the data transport between the client and the server from scratch. Most of the time you could just put the field names and values in a JSON syntax or something similar and just pass it to the server for processing. However; with multipart forms you are not only sending the additional attributes but you are sending an actual file. This means that your server side web service, api, or MVC must get the object in a way that it can understand both the attributes and the file.
Although this might sound confusing let’s look at an example. I have a form which allows the user to add personal information and then allows them to upload (email) their resume. (Figure 1) Using .net I could just write the necessary code in the code behind but I want to do this using async processing.
Using jquery and html 5 syntax, I could use the Dataform and bind all of this and send it to server. Like this.

 var formURL = "api/applicant/Upload"
 var jForm = new FormData();
                jForm.append("txtHighSchool", $('#txtHighSchool').val());
                jForm.append("txtCollege", $('#txtCollege').val());
                jForm.append("txtTraining", $('#txtTraining').val());

                jForm.append("file", $('#file').get(0).files[0]);

                $.ajax({
                    url: formURL,
                    type: "POST",
                    data: jForm,
                    mimeType: "multipart/form-data",
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function (data, textStatus, jqXHR) {
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        }
                    }
                });

Instead of adding each field individually I could just do this

var form = document.getElementById('form-id');
var formData = new FormData(form);

However; I like having complete control over the form’s object.
That’s all there is ….This is great but what if you need to allow a browser that does not have formdata available. (I am glad you asked.) My next blog will talk about your options there. You might also be wondering what does the server side code look like….That is coming up.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , | Posted under ASP .NET 4.0, Programming/Coding | RSS 2.0

Author Spotlight

David Bauernschmidt

David Bauernschmidt

I live in the historical triangle of Virginia where I am married with two daughters. I have spent over 13 years working for a Fortune 500 company in the computer area. I started in VB 6.0 and by the time I ended my employment I was supervising a development team where we built many web applications. When my first daughter was born I wanted to spend more time with her so I left and became a programmer analyst for local government as well as launch my own company. Since then I have grown James River Webs into a profitable web design and application company helping small businesses create a big presence on the internet. As an employee I have created web application used by citizens and other companies. I enjoy fly fishing, and spending time with my family. I also enjoy learning new approaches and development tools when it comes to developing applications.

Leave a Reply

Your email address will not be published. Required fields are marked *


9 − = 3

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>