Ajax file uploads

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Ajax file uploads

Post by JellyFish »

How do I upload a file with Ajax? I have a file-type-input field but how do I send it as a parameter?

Code: Select all

<input type="file" /> //this is what I call a "file-type-input" field :D
With things like text-type-input elements I can just go ahead an send it's value as a parameter for my Ajax request.

Like this:

Code: Select all

$.post("file.php", {text: $("$textField").val()})
But how would I send file-type-input field's file as a parameter? Does the value of the file-type-input field what I want to send as a parameter? I need PHP to recognize this parameter as the $_FILES super global, as regular form posts do.

Please help me with this one I'd so much appreciate it. :D

EDIT: I googled for "Ajax file uploads" and found out that the XMLHttpRequest object doesn't support file uploads.

So then how do I upload files without refreshing? Looking for a real straight-forward tutorial please. :D
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

This has been asked quite a bit on the forum lately.. surprised you didn't see any of the other threads.

At any rate, you need to use a (hidden) iframe.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Yeah sorry. I should of googled first.

Thanks for you post.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Is there a way to prevent an iframe from changing or adding to the back/forward history? Whenever the iframe loads a new page a new index is added to the history object.

Hopefully you know what I mean. So how do I prevent the iframe from adding more back history every time a page is loaded within it?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Don't attempt to mangle the history. If you don't want it updated, use Ajax and DHTML to replace content.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Feyd wrote:Don't attempt to mangle the history.
As soon as the iframe directs to a new page it adds to the history. I don't want this to happen.
Feyd wrote:If you don't want it updated, use Ajax and DHTML to replace content.
How could I uses Ajax to upload files? From what I've read it's not possible.

So unless you have a way to hack Ajax's abilities I'm going to have to mingle with the history, if that's possible.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

JellyFish wrote:How could I uses Ajax to upload files? From what I've read it's not possible.

So unless you have a way to hack Ajax's abilities I'm going to have to mingle with the history, if that's possible.
There's been plenty of information on performing Ajax based uploads all over. Search.
Post Reply