XMLHttpRequest POST multipart/form-data

Question

I want to use XMLHttpRequest in JavaScript to POST a form that includes a file type input element so that I can avoid page refresh and get useful XML back.

I can submit the form without page refresh, using JavaScript to set the target attribute on the form to an iframe for MSIE or an object for Mozilla, but this has two problems. The minor problem is that target is not W3C compliant (which is why I set it in JavaScript, not in XHTML). The major problem is that the onload event doesn't fire, at least not on Mozilla on OS X Leopard. Besides, XMLHttpRequest would make for prettier response code because the returned data could be XML, not confined to XHTML as is the case with iframe.

Submitting the form results in HTTP that looks like:

Content-Type: multipart/form-data;boundary=<boundary string>
Content-Length: <length>
--<boundary string>
Content-Disposition: form-data, name="<input element name>"

<input element value>
--<boundary string>
Content-Disposition: form-data, name=<input element name>"; filename="<input element value>"
Content-Type: application/octet-stream

<element body>

How do I get the XMLHttpRequest object's send method to duplicate the above HTTP stream?

Answer 1

It sounds like you confuse a few things. Maybe you should clarify where you are and what you want to achieve.

Probably it is best you look at one of the many JavaScript Frameworks that are available (jQuery comes to mind) to solve that problem for you at a higher level of abstraction.

Answer 2

I don't see why iframe (an invisible one) implies XHTML and not ANY content. If you use an iframe you can set the onreadystatechange event and wait for 'complete'. Next you could use frame.window.document.innerHTML (please someone correct me) to get the string result.

var lFrame = document.getElementById('myframe');
lFrame.onreadystatechange = function()
{
   if (lFrame.readyState == 'complete')
   {
      // your frame is done, get the content...
   }
};

Answer 3

There isn't any way to access a file input field inside javascript so there isn't a javascript only solution for ajax file uploads.

There are workaround like using an iframe.

The other option would be to use something like SWFUpload or Google Gears

Answer 4

You will need to POST to an IFrame to get this to work, simply add a target attribute to your form, where you specify the IFrame ID. Something like this:

<form method="post" target="myiframe" action="handler.php">
...
</form>
<iframe id="myiframe" style="display:none" />

Answer 5

i am confuse about the onload event that you specified, it is on the page or on iframe?, the first answer is correct theres no way to do this using purely xmlhttprequest, if what you want to acheive is triggering some method once the response exist on iframe, simply check if it has content already or not using DOM scripting, then fire the method.

to attach onload event to the iframe

if(window.attachEvent){
 document.getElementById(iframe).attachEvent('onload', some_method);
}else{
 document.getElementById(iframe).addEventListener('load', some_method, false);
}

Answer 6

I dont got an answer for you here, but what your doing doesnt sound impossible, idk why these guys got hung up on iframe stuff. What im currently doing is submitting information with ajax/javascript. I can get an textresponce or xml responce form the page i submit to. XML might be better for sorting out information you want, it could return text of the IMG you processed. You can submit the image for upload, it can be processed by the server, i use PHP so i have it process the image & it give me error messages if file isnt supported or the information of success, file size, what type of image (gif,jpg,bip,pgn), so what you trying to do i think is possible.

You want to submit something, you can specify in the javascript code where you want to post the data, or you can even use INLINE code to grab information from an input text field as a varible to use when submitting an image or whatever. So yes i do believe what ur doing is possible.

I made my own live customized chat system, same concept with sending & getting back information. However i will say you will have to be careful with your code & specify the info you get back. Sorry if this was unhelpful, AJAX is new to me & im self taught.