How to upload a image using ajax

Senthil wrote:

I'm new in ajax. How to upload a image using ajax..

If you use an XML HTTP request to POST a request body that is the same
as the type of POST that a form would send when uploading an image file
then any image data in that body would be 'upload'.

The odds are that your issue will turn out to be the
difficulty/impossibility of getting an image file (and its contents)
from the user's hard disk and transforming it into a form that could be
the body of an XML HTTP request.

Richard.

Hi Richard..

I created some example pages to send data's through XML HTTP request.
Same way i try to upload a image using ajax through XML HTTP request. I
try to get the uploaded image details through PHP $_File() request.
But i did not get any information about the uploaded image..

Help me to send a sample code to my email id se*************@gmail.com
for upload image using Ajax XML HTTP request.

Thanks,

Senthil
Richard Cornford wrote:

Senthil wrote:

I'm new in ajax. How to upload a image using ajax..

If you use an XML HTTP request to POST a request body that is the same
as the type of POST that a form would send when uploading an image file
then any image data in that body would be 'upload'.

The odds are that your issue will turn out to be the
difficulty/impossibility of getting an image file (and its contents)
from the user's hard disk and transforming it into a form that could be
the body of an XML HTTP request.

Richard.

Senthil wrote:

Hi Richard..

I created some example pages to send data's through XML HTTP request.
Same way i try to upload a image using ajax through XML HTTP request. I
try to get the uploaded image details through PHP $_File() request.
But i did not get any information about the uploaded image..

AFAIK, you can't send files via AJAX due to security issues. You must
in fact submit a form. There are a couple ways to alleviate this

1. create a form and set the 'target' attribute to the name of an
iframe that will handle the upload

<form name="someForm" method="POST" target="hidden_form"
enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<input type="file" name="upload_file">
<submit name="submit" type="submit" value="Submit">
</form>
<iframe name="hidden_form" src="upload_handler.php" height="0"
width="0"></iframe>

Bad part is that this is asynchronous (you can't upload multiple files
at once).

Other solution:
Put the file upload form inside an iframe. This allows asynchronous
uploads, though the browser will typically limit the number of
connections, around 4. See the following screenshot[1].

When I submit the iframe form, it calls a function in the window's
parent (via window.parent) to generate a new iframe form for uploading.
When files are uploaded, javascript is called to load the uploaded
image in the main window.

[1] http://tinyurl.com/fw9ky