Send Multipart Data without Using HTML5 FormData

In my previous article I discussed the process of building a FormData object and sending it to the server using Jquery. This is great but what if you are building this site to be used by a browser that does not recognize DataForm objects. You need to know which browsers allow it then look here.
You have a couple of options.
1. You could simply check to see if the browser allows it and if not, then you redirect them to a different form.

if(window.FormData == undefined) {
} else {
}

2. You could try and build your own form header/boundaries in Javascript. However; cross-browser AJAX file upload is not easy to do.
http://stackoverflow.com/questions/5933949/how-to-send-multipart-form-data-form-content-by-ajax-no-jquery/5935286#5935286

3. There are some js libraries out there that can help to build a url that emulates the XMLHTTPRequest 2 syntax.

http://malsup.com/jquery/form/

4. Use an IFrame (hidden) like these examples

I went ahead and used the example from hayageek to simply allow those user with older browsers to use have the same functionalities as HTML5 browsers. At some point I will remove this code when I start to see more and more users moving towards HTML5 browsers. (Note: You can also pass another variable through the form and track it on the server to see how many people are actually using this method verses the very clean formdata() object.)
In the end you end up with something like this. (In case that article is removed here is a copy from hayageek’s article above)

function getDoc(frame) {
var doc = null;
// IE8 cascading access check
try {
if (frame.contentWindow) {
doc = frame.contentWindow.document;
}
} catch(err) {
}
if (doc) { // successful getting content
return doc;
}
try { // simply checking may throw in ie8 under ssl or mismatched protocol
doc = frame.contentDocument ? frame.contentDocument : frame.document;
} catch(err) {
// last attempt
doc = frame.document;
}
return doc;
}
$("#multiform").submit(function(e)
{
var formObj = $(this);
var formURL = formObj.attr("action");
if(window.FormData !== undefined) // for HTML5 browsers
{
var formData = new FormData(this);
$.ajax({
url: formURL,
type: 'POST',
data: formData,
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
success: function(data, textStatus, jqXHR)
{
},
error: function(jqXHR, textStatus, errorThrown)
{
}
});
e.preventDefault();
}
else //for olden browsers
{
//generate a random id
var iframeId = 'unique' + (new Date().getTime());
//create an empty iframe
var iframe = $('<iframe src="javascript:false;" name="'+iframeId+'" />');
//hide it
iframe.hide();
//set form target to iframe
formObj.attr('target',iframeId);
//Add iframe to body
iframe.appendTo('body');
iframe.load(function(e)
{
var doc = getDoc(iframe[0]);
var docRoot = doc.body ? doc.body : doc.documentElement;
var data = docRoot.innerHTML;
//data is returned from server.
});
}
});
$("#multiform").submit();

Important Note: The key to using this type of method is that in order to use any responses from the server back in your javascript you need to always return a Success Status of 200 and create a json object as the return text. Then in your javascript return you can deserialize the return and display any messages. If you try to return anything other than a status of 200 you are going to have problems because the iframe will contain the error message which will break your javascript. I will talk about this in my follow up blog.

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 *


× 5 = 40

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>