Question

I’m trying to implement the well-known method used to upload files to a server in an AJAX like way (I already have a flash-based upload in place, this is a fallback), but it seems as though my implementation is faulty. Looking at the network information on Opera Dragonfly (equivalent of FireBug), it seems that the request is being directed to the current page rather than the src of the iframe.

At first I was pretty sure that this isn’t normal behavior, but then I realized that the iframe is part of the page, and thought that’s what was being represented. Regardless, the server is not receiving the request at the location represented by the iframe’s src attribute. Can someone tell me why this is?

I’ve included a picture of the Dragonfly entry relating to the submission of the form to the iframe. Notice the “referer” header is the same as the request URL. I know it’s the form submission being represented by this entry because of the Content-Type header.

The markup for the iframe and form is as follows:

iframe:

<iframe id='uploadMediaIframe' name='uploadMediaIframe' src='ActionServlet'>


</iframe>

form:

<form id='exForm' class='exForms' method='post' target='uploadMediaIframe' enctype='multipart/form-data'>

 <input id='regularUploadFormFileInput' class='regularUploadFormFileInputs' name='Filedata' type='file'/>
 <input name='action' value='uploadEntryMedia' type='hidden'/>
 <input name='type' value='picture' type='hidden'/>

</form>

Any help would be greatly appreciated. Thanks.

Answer 1

I think you are missing the action attribute of the form. it should be like this:

<form id='exForm' class='exForms' action="posted_url" method='post' target='uploadMediaIframe' enctype='multipart/form-data'>

 <input id='regularUploadFormFileInput' class='regularUploadFormFileInputs' name='Filedata' type='file'/>
 <input name='action' value='uploadEntryMedia' type='hidden'/>
 <input name='type' value='picture' type='hidden'/>

</form>