file upload be accessed to send through ajax POST?

Question

here's the situation

Within a single form 1) User clicks on the 'browse' button, which opens a dialog to choose an image file to upload. ie

input id='img_upload' name="ufile" type="file" value="Browse"/>

2) With file selected, user then clicks a button 'Upload file' button, which calls a js function ie

input type='button' id='uload' class='save2' value='Upload file' onclick='upload_img()' >   </input>

What I would like upload_img() to do is send the contents of the browse via POST through something like AJAX to a .php file called image_upload.php, which will save the img and output an tag displaying the img file. I have an iframe which displays the contents of image_upload.php

If possible, how can I access the contents of a 'browse' and send it through POST

Cheers!

EDIT Sorry I forgot that a strict subset of html is supported, so I had to remove the left most <

Answer 1

If you don't mind the user needing flash and that you have to use jquery, uploadify does pretty much exactly what you just requested. You control the callback so you can do whatever you need after the file uploads.

http://www.uploadify.com/

Answer 2

I'm guessing you're hoping to pull the file path from the file selection action, send it to the php script, which will use the file path to upload the actual image.

In short: this is not possible . The PHP script is executed on the server, and therefore has no access to the client's filesystem. However, this does not mean that AJAX file uploads are impossible altogether. There are several jQuery-utilizing solutions that should do the trick. This article features seven of them.