Uploading images without submit

Hi,
This is a little tricky, i hope i can explain it properly:

In order to let my user upload files from my site i use 2 file:
1. file.html
2. upload_file.php

On file.html i have the following input inside a from:
<input type="file" id="file">

This is to let the user select the file.


On the uploading page - upload_file.php i use this element:
$_FILES["file"]
To receive the information from the file input and upload the file. - This is after the user clicked submit on the html page.

So far so good.

Now, How can i upload a file without submitting the form?
I would like to let the user choose a file and stay on the same page while the upload is taking place and not to use the traditional submit form method.
(you probably guessed I'm going to use ajax).

I did some research and i think i now what information I'm missing, if i got it right:

I need to get the value of a file input:
document.getElementByID('file').value
And send it as a query string to the uploading file (with xmlhttprequest):

"upload_file.php?path=" + document.getElementByID('file').value

If this is indeed the way, My question is:
What do i need to write on upload_file.php so that the file will be uploaded using the information from a query string and not a form?


If my solution is wrong please let me know how this can be done?

 

you need to be looking into a technology called AJAX. It's a bit harder to implement in php (I'm a ASP.NET dev) but if you try something easier for starters you'll get the hang of it. Google AJAX for more information and tutorials.

 

You dont have to use Ajax for that. You can put the file.htm in a iframe on what every page you want. So when the user selects the file and clicks submit , we will just submit the iframe. So only a littler portion, may be just the text box area will get refresh and all the other section of the page will stay there without refreshing.

 

my feeling is he wants something like the attachment submitting for yahoo mail. If you use the iframe solution and the file takes a few minutes to upload you still can't do much else on the page in the meanwhile, like uploading another file in the same time. But I guess if he doesn't want to learn ajax and do it the elegant way, an iframe could give a few benefits. A solution I didn't think of. rep for that.

 

------------------

 

FYI, Ajax does not allow uploading file. Without refreshing page, the file is only can be submitted with iframe.

For PHP Ajax File Upload, you can try this KoolUploader: http://www.koolphp.net/support/demos/#kooluploader.ajax_progress_tracking

This KoolUploader supports progress tracking bar (using AJAX)

 

Try uber uploader, I can't post the link.