OpenJS > Articles > Ajax File Upload

Ajax File Upload

You might have seen Ajax File Uploading in some sites. The basic idea is to upload a file without refreshing the page. Some sites go even further by providing details on how much percentage is uploaded, etc. It is very easy to achieve this effect using javascript.

First off, I did not like using the term 'Ajax' when describing this method. But there is no other word that can be used. And this method fits within my definition of Ajax - "Sending or receiving data from the server without refreshing the page.". So I will name this method Ajax file upload.

Theory

The basic idea behind this effect is to redirect a form's action into a hidden IFrame. So, when the form with the file field is submitted, the result will appear in a IFrame. But since it is hidden, the user will not see it. This effect is achieved using the 'target' attribute of the Form tag.

See the small squire? That is the IFrame. Typically, it will be hidden.

Code

(X)HTML

<form id="file_upload_form" method="post" enctype="multipart/form-data" action="upload.php">
<input name="file" id="file" size="27" type="file" /><br />
<input type="submit" name="action" value="Upload" /><br />
<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>

JavaScript

function init() {
	document.getElementById('file_upload_form').onsubmit=function() {
		document.getElementById('file_upload_form').target = 'upload_target'; //'upload_target' is the name of the iframe
	}
}
window.onload=init;

PHP

This should be in upload.php - the action of the form.

<?php
include('../../../common.php');
upload('file','.','txt,jpg,jpeg,gif,png');

The code to upload the file must be given here. I used one of my custom functions to upload the file - it is not a native PHP function. Needless to say, this is not restricted to PHP - you can use any server side language here.

Update: Part two - Ajax File Upload Response Handling

Comments

Anonymous at 12 Apr, 2007 03:31

thanks for the article,
it will be interesting to see how it could give details on how much percentage is uploaded?

cheers

No Average Joe at 19 Apr, 2007 06:29

Thanks so much, who knew getting this effect is so easy?

Anonymous at 22 Apr, 2007 07:38

I'm a little confused why the page load logo still shows the page to be loading when uploading a file, is there anyway to upload a file without this effect?

Anonymous at 25 Apr, 2007 02:40

are you sure it is AJAX? Do you know what are you saying? Because as far as I know it is not AJAX, you use frames. AJAX stands for Asynchronous JavaScript and XML, you do not do either.

Anonymous at 01 Jul, 2009 09:07

you idtiot, he explained that it's not specifically AJAX, but refers to it because it asynchronously deals with data without refreshes the page, giving the same desired result as Ajax, read before you open your mouth.

Anonymous at 04 Sep, 2009 08:02

The correct spelling is 'idiot' you moron.

The OP of the comment that you bashed is absolutely correct. Everything about this page indicates that it's an AJAX file upload example. Look at the name of the page if you don't believe me. Even the title and first paragraph indicate that this uses the AJAX methodology to upload a file.

There is nothing asynchronous about this upload function. He has simply hidden all of the refresh bits within an Iframe and wrapped the name AJAX around it. Look at the form code. It's still a post function like every other type of non AJAX file upload. Here is the source if you are still in disbelief :
<form id="file_upload_form" action="upload.php" enctype="multipart/form-data" method="post" target="upload_target">
<input id="file" type="file" size="27" name="file"/>
<br/>
<input type="submit" value="Upload" name="action"/>
<br/>
<iframe id="upload_target" style="border: 1px solid rgb(204, 204, 204); width: 100px; height: 100px;" src="" name="upload_target">
</iframe>
</form>

There is nothing AJAX about this at all. This page should have been renamed something like "how to upload files using iframes" or some such.

TO THE AUTHOR:

Your definition - "Sending or receiving data from the server without refreshing the page." is essentially correct. Your implementation of it however fails completely. You are still doing a page refresh, only you are doing it in an iframe.

That said, I can tell you that this really is not a bad example of how to upload a file using iframes. Perhaps you could rename and reformat this page so as to show it for what it really is, rather than try to bullshit your way through.

Lennarth Anaya at 12 Nov, 2009 02:29

Thanks to the author, it's quite simple but didn't cross my mind during my hurries.

About AJAX doubts:

For security reasons, JavaScript CANNOT ACCESS any local hard drive (imagine your machine exposed to anyone only because you accept JavaScript execution in your browser only to see user friendly pages).

Actually, iFrames manage asynchronous calls, you can figure it out since you can use your current page while your browser is downloading content to an iFrame.

The name AJAX served us to find an asynchronous way to get this article, other way we shouldn't find any article to upload files without refreshing the page.

Have a nice day.

CodeJunkie at 10 Mar, 2010 07:33

[quote=Anonymous]JavaScript CANNOT ACCESS any local hard drive[/quote]

This is simply not true. Javascript cannot access any local hard drive in browsers, unless that user is browsing with IE, in which case you certainly _can_ access the local machine via the FileSystemObject, instantiated by a proper api call using the ActiveX interface.

Know, before you blurt.

Anonymous at 11 Jan, 2010 07:31

At first I would like to say thank you to the autor for excellent example

To all people that say this is not ajax:

Guys I now it is painful for you to see how the autor of this article with few simple lines of html code do the same thing that you usually do with hundred of lines complicated javascript code, and I very sorry for you, but who care whether this is ajax or not, if the result is the same?!

There are cases where using ajax javascript objects is a must, but for this case and for many other cases this ajax approach is perfect.

So we must be grateful to autor for sharing it with us.

You must not blame the autor for thing you cannot understand or accept.

Fernando Franzini at 26 Apr, 2007 05:07

Very cool article !!! Help me a lot !!!

Badshah at 27 Apr, 2007 05:38

I am not seeing any AJAX kind of implementation in this example. Where is the asynchronous call happening?
This is some other way to submit form. Sorry you can't say it AJAX.

Jason Miller at 12 Apr, 2008 04:35

Regardless of whether using an iFrame to submit files qualifies as AJAX, it is currently the only method (in JavaScript) for submitting files to the server Asynchronously.

Anonymous, but not the other Anonymous, a totally different Anonymous at 15 Jan, 2009 03:06

Jason, people are stupid, don't pay attention to them. Some don't want to code in AJAX (for example) because it's useful but because they want to get a "reward" for using a so-called sophisticated coding implementation such as AJAX.

Anonymous at 05 May, 2007 07:01

Re: people complaining about AJAX, try re-reading ¶2...

dwikristianto at 08 May, 2007 02:11

big thanks for article, i'll have it a try

Cohen at 06 Jun, 2007 12:41

Great article, thanks!

And it is correct to call it AJAX, as AJAX 'calls' can be implemented either with XMLHttpRequests or with IFrames. In some frameworks you even get to choose which method is used to make the 'calls'.

Jim at 07 Jun, 2007 11:27

Thanks friend...
Plz wud u explain a context in which this code wud be of use.

Anonymous at 24 Jul, 2009 01:49

Example: I have a script which I wish to receive a file from the client. I have neither a need nor a desire for this script to announce it's presence to the user and would like to avoid refreshing the page because the user will immediately need to work with other data and I don't want the delay refreshing would cause. Plus there are other forms on the page which may loose their data if the page is refreshed.

This is a real life scenario. I just used this example for this situation. My predecessor got around this problem with flash forms, which are slow to load and consequently slow down my application (the site in question has more in common with a desktop app than a normal web page). This is a much better solution IMHO.

Anonymous at 09 Jun, 2007 02:06

I would really like to understand how you might get the progress out of this method.
I was wondering how I might do this with httpRequest instead as well.

If someone would be so kind as to help me my E..!!(E&#($& - Mai1 is

dan ...-~~~at~~~-- danmckinnon )*)*&)* --~~~d0t~~-- net

(and of coarse ignore all the funny charecters, it's to avoid bots from grabbing my e-mail address)

Bidfreelancers at 10 Jun, 2007 05:17

Bit confuse. still learning to make it work.

gc at 14 Jun, 2007 06:37

how do you hide form after uploading the file

Bruno at 21 Jun, 2007 06:53

Hi,
This doesn't seem to be working in IE.
Any reason for that?
Cheers

Binny V A at 21 Jun, 2007 11:33

Its working on my system - which version of IE are you using?

Bruno at 24 Jun, 2007 08:08

Hi,
Thanks for your reply
I'm using version 6.0
Cheers
Bruno

Anonymous at 09 Jul, 2007 10:50

I'm also trying to get it to work in IE6 (works fine in Firefox) but it continues to bring up a seperate window. Only difference in code is that I create the form, inputs and ifram in Javascript. Any clues?

Josh Stodola at 27 Jun, 2007 07:32

Can you explain why you used javascript to set the target of the form?!

Binny V A at 27 Jun, 2007 10:28

Will not work otherwise - target is not a valid attribute for a form tag.

Anonymous at 07 Jul, 2008 07:10

Not true. "target" is valid. See: http://www.w3.org/TR/html401/interact/forms.html#h-17.3 "Attributes defined elsewhere:"

Anonymous at 14 Feb, 2009 07:27

I still insist, this isn't AJAX

Anonymous at 02 Jul, 2009 07:02

At Jun, 2007 this was true. That w3c documentation is revised.

Anonymous at 06 Jul, 2007 03:49

Yes it is not ajax, File form upload and Browser compatibility are some of ajax drawback,
follow the following like you can find useful code
www.webtoolkit.info/ajax-file-upload.html

Anonymous at 10 May, 2008 08:02

If you were paying attention (or know anything about JS or the DOM), the code at the link you provide does the same thing. It just dynamically creates the iframe per request.

Shitesh Srivastava at 14 Jul, 2007 05:28

this is very good site

yes at 24 Jul, 2007 02:45

what is this ?? you should write some thing else??

Anonymous at 26 Feb, 2009 07:45

so should you

Leonardo Gazio at 18 Jul, 2007 11:34

That's not AJAX, and even if so, I can't see any diferent stuff on it, when we look for ajax, we're looking for dinamic things like, showing the 'loading...' or if possible a real time progressbar...

Rob at 19 Jul, 2007 01:27

If you want progress check this out:
www.seemysites.net/projFolder/uploader/

I am also not able to get any of the examples of this method (i.e. iframes) to work with IE 6. If anyone has been able to do it please post it here.
Since Ajax stands for for "Asynchronous JavaScript and XML", I have a feeling there is no way to do file uploads since JSON and XML can only work with text going to and coming from the server. I still can't find a way to send a file over using pure AJAX. Please prove me wrong if you can.

Anonymous at 14 Feb, 2009 07:30

en am still waiting for it, now thats what we would call AJAX

Anonymous at 23 Aug, 2007 08:02

Honestly, this is just using php function. You can access the name, size, and error of the loaded file using $_FILES['file'] cat an index referring the related property, however, you can only find the original file name using $_FILES['file']['name'] but not the full path. Does someone happen to know how to get the full name of the original file?

Exra at 31 Aug, 2007 08:39

okay well technically if you could just open the file and return each byte as either binary, hex, or dec you could write the file to the server yourself. so you could in essance send a large string of text(or multiple) and have that write to a file on the other side.

praveen at 04 Sep, 2007 12:57

Hi,
Thank you it is realy very good idea, i used it, it is woking well
thank you
Praveen

Levi Putna at 04 Oct, 2007 11:53

Thanks for this example, many other examples of this method were over complicated and made it hard to understand the theory. I think you were correct in saying this is not ajax but you can combine this method with a ajax call to get updates on the upload progress.

Nice work.

David Preece at 24 Oct, 2007 01:21

Hey, thanks - an excellent reference for the technique in that it strips all the extraneous crap :)

BTW - The "not Ajax" people: The _point_ of Ajax is to not have to reload the page, regardless of the technique used.

Gideon at 06 Jun, 2008 09:26

Actually, AJAX stands for "Asynchronous Javascript And XML" which means that it actually requires the XML and JavaScript.. it's in the name.

Anonymous at 03 Jan, 2008 10:49

Hey Thanks for this Example

niki at 08 Jan, 2008 03:38

Please help me . How i upload file using ajax ? Any one knows about it.I am very sad :(. Please help

Anonymous at 15 Feb, 2008 07:59

Pressing the back button on my browser (Fire Fox 2.0.0.12) also tells me a file has uploaded. Lovely stuff.

Ajeet Singh at 28 Feb, 2008 02:25

Hey thanx for the code & the concept , i have read a lot about iframes in the wrox professional
& Ajax Design patterns , and i am sure that u have used that the basics quiet right , in all a simple idea but with great impact.

I am also looking for the progress bar and State Complete Callbacks after the file upload process.

Thanx Again.

programmer cum philospher at 04 Mar, 2008 05:44

indeed it is not ajax.but this is the only way to upload file that can give you ajax feel.Ajax can be used to show the status.You can download ajax file upload class from php classe(it also uses ifrmae technique)

DrSamba at 03 Apr, 2008 01:29

There is no cross-browser compatible way that I know of to upload files using Javascript. The reason is that for security reasons, Javascript is blocked from accessing the client's file system. The only way around that is by using signed scripts, but those work in Netscape and Mozilla only, not in IE.

leo at 06 Apr, 2008 11:40

Then how the f*** does Gmail do it? :S

Anonymous at 02 May, 2008 02:34

Gmail uses an iframe

IT IS AJAX at 08 Apr, 2008 04:38

AJAX is asynchronous, in that extra data is requested from the server and loaded in the background without interfering with the display and behavior of the existing page. JavaScript is the scripting language in which AJAX function calls are usually made.[1] Data is retrieved using the XMLHttpRequest object that is available to scripting languages run in modern browsers, or, alternatively, through the use of Remote Scripting in browsers that do not support XMLHttpRequest. In any case, it is not required that the asynchronous content be formatted in XML.

Thanks for the script!.

ngonar at 13 May, 2008 02:33

visit my website www.karyaiman.com

it is using ajax
it has no refresh and using the object XMLHTTPRequest.

this is the basic thing of ajax.

what you are using is the old version of web before Ajax method is well known.
many web programmer using iframe to reduce the refreshed page.

regrds,

ngonar

siner at 04 Jul, 2008 04:21

Hello there,

I don't know what I'm doing wrong: the form gets submitted and the upload.php gets loaded, but no into the iframe, it's displayed normally as a new page.

Any suggestions?

Thanks in advance!

Regard siner

Binny V A at 06 Jul, 2008 11:30

Is there any JS errors on that page?

Anonymous at 08 Jul, 2008 05:28

I modified the code like this, since I build the whole form dynamically:

frm = document.createElement("iframe")
document.body.appendChild(frm)
.
.
.

doc = document.createElement("form")
document.body.appendChild(doc)
doc.enctype = doc.encoding = "multipart/form-data" // ensure it will work with IE and FF
doc.action = "_hnew"
doc.method = "post"
doc.target = "frm"
.
.
.

it works fine with FireFox, IE makes everythink ok except for the fact that it opens a new window with a blank page inside it, how can I get rid of that annoying extra window???

etude at 27 Jul, 2008 10:34

ahem, you need nothing of the js-code. Just write it this way:

<form id="file_upload_form" method="post" enctype="multipart/form-data" target="upload_target" >
<iframe id="upload_target" name="upload_target" <strong> src="upload.php" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>

Anonymous at 28 Jul, 2008 09:46

Why did this need javascript to point to the target?
Setting a target in the HTML works fine too :?

przyciemnianie szyb at 14 Aug, 2008 04:41

nice i was looking for that type of upload script

Anonymous at 23 Aug, 2008 03:42

Personally I use swfupload which is free and opensource. I think it is better and faster to integrate. swfupload.org. The problem is that it is in flash and some people don't like the idea of having flash on their site, but it already comes with progress bar and everything else. You can see an implementation that uses it on Kiqlo

Anonymous at 25 Aug, 2008 04:24

When running this script in firefox with firebug, it works the file was uploaded. But if you check firebug [HTML] --> [Net] there are a post request to upload.php.
In the [POST] tag, there are nothing inside,
in the [Response] Tag, there are a error "no file specified"

the request seems execute more than one time

Anonymous at 17 Sep, 2008 11:33

firebug does not cache responses, thus requiring the post to be sent again, as this is not possible with files, the post request is empty

Aruna at 27 Aug, 2008 03:53

great article..
i was searching for this since long time..

fuleo at 06 Sep, 2008 09:32

Been more than 1 year since this good article.

Is there really no other alternative to "Ajax file upload" without using iFrame... ?

N.Arun at 12 Sep, 2008 10:14

can you give idea to display the uploaded image in the same page without reload

Nitin at 22 Sep, 2008 10:09

You can't really call it an AJAX file upload. It's an IFRAME file upload. AJAX is a totally different technology.

Peti at 23 Oct, 2008 12:58

Jaj hát én mikor rájöttem má erre bazmeg...

Anonymous at 30 Oct, 2008 04:12

$("upload_target").onload=function() { alert("Uploaded"); }
anyone know is this will work at all in IE, this "call back" is very handy. works everywhere except IE.

Binny V A at 31 Oct, 2008 11:48

See Part two - Ajax File Upload Response Handling

pmv at 03 Dec, 2008 12:14

Awesome, thanks.

Anonymous at 13 Dec, 2008 07:01

This is really cool feature. Got the idea: hidden iframe, thanks for this great article

Bouni at 30 Dec, 2008 11:51

Hello,

first of all THANKS :) (Hope i get this to work ;) )

I tryed everything, but it will not work ??
Im using Firefox 3.0.5
[code]
<form id='file_upload_form' method='post' enctype='multipart/form-data' action='php/misc/file_upload.php' target='upload_target'>
<input name='file' id='file' size='27' type='file' />

<input name='action' value='Upload Image' type='submit'>

<iframe id='upload_target' name='upload_target' src='php/misc/file_upload.php' style='border: 1px solid rgb(204, 204, 204); width: 400px; height: 100px;'></iframe>
</form>
[/code]
This is my Code.

When i click on Submit the whole page reloads and nothing habbens ??

Can someone help me, please.

I dont know where the promblem comes from !?

Thanks

Bouni

Please excuse my bad english ;)

Sebinio at 08 Jan, 2009 11:05

Bouni,

this is what i have and works in FF 3.0.5

<form id="file_upload_form" method="post" enctype="multipart/form-data" action="upload_file.php" target="upload_target">
<input name="file" id="file" size="27" type="file" />

<input type="submit" name="action" value="Upload" />

<iframe id="upload_target" name="upload_target" src="" style="width:100px;height:100px;border:1px solid #ccc;"></iframe>
</form>

Ged at 16 Feb, 2009 02:19

http://en.wikipedia.org/wiki/Ajax_(programming)

It's Ajax. Not AJAX, but Ajax. Now are the 'purists' content? :P. They should see Comet if they don't like this as Ajax. Comet's an even cruftier hack, but it does something otherwise impossible, even with Ajax. See below for Wikipedia's support.

"Ajax, or AJAX (Asynchronous JavaScript and XML), is a group of interrelated web development techniques used to create interactive web applications or rich Internet applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax has led to an increase in interactive animation on web pages.[1][2] Data is retrieved using the XMLHttpRequest object or through the use of Remote Scripting in browsers that do not support it. Despite the name, the use of JavaScript and XML is not actually required, nor do the requests need to be asynchronous.[3] The acronym AJAX has thus changed to the term Ajax, which does not represent these specific technologies.[4]"

Anonymous at 10 Apr, 2009 02:14

This is not AJAX!

Anonymous at 11 May, 2009 04:25

Before XMLHttpRequest became as native as it is today, people used iframes to retrieve data dynamically (gmail did this too).
It really doesn't matter if he uses an iframe or an XMLHttpRequest since the only difference between the two is that iframe actually renders the response and XMLHttpRequest doesn't (ofcouse you have a wider variety of settings for xmlhttprequest but for this case it does not matter).

The thing is, that even if he did this using XMLHttpRequest it wouldn't matter because the results will be the same.

Joe at 16 Jun, 2009 04:21

This blog helps a lot. I studied this example and I managed to simplify it further.

Actually, you don't need to setup the init & onload function because IFRAME supports onLoad (perhaps you need it for older browser) and FORM also has target attribute which you can just point to the IFRAME.

joekuan.wordpress.com/2009/06/12/ajax-a-simplified-version-of-file-upload-form-using-iframe/

Hope this helps.

ulfat at 01 Jul, 2009 09:54

Hi!

Is there a way so that we can check when response has been completed and also I want to check what is in the response.

My problem is: I post my form to slideshare api and get its response.Now this response comes into iframe and i am able to see it.but in coding i want to read this response.I have checked for innerHTML property of iframe using JavaScript but it is not working.The goal to achieve is to check the response and update text on the form so that user can see the status of uploading.
Any help.

Regards
Ulfat Hussain

Saumon at 06 Jul, 2009 10:00

Who cares if it is AJAX or not, it works and its asynchronous.
Great work, thanks a lot.

techsupp006 at 17 Sep, 2009 01:30

First of all, thanks a lot. Exactly the quick and simple thing I was looking for.

But I have a problem with the back button of browsers (all of them).
The form that I'm using this method in is part of a series of pages - sort of a wizard - and after I upload a file the back button of the browser doesn't take me back to the previous page, it instead goes back before submitting the hidden iframe's form. so basically, users need to hit the browser's back button twice in order to go back to the previous page...
any way around this?
i do have a button on the page that sends them back properly (it's a link), but i don't want to ruin the browser's back button.

Thanks again
Roy.

Anonymous at 09 Oct, 2009 07:31

Which is the advantage to assign the target attributes to the form dynamic instead of assign it on the HTML tag?
Nice work Thanks

Anonymous at 17 Oct, 2009 09:48

Who gives a shit if it's ajax or not?? If he didn't put ajax in the title, many of you wouldn't have found this page in the first place (when searching for it).

Nice code. Helps me a lot.

Anonymous at 29 Oct, 2009 08:19

Oh common, he said that it's not AJAX, he only used the name of it. If you can provide something called "AJAX Uploading File", as far as I know, you couldn't, then come back here. Otherwise, just grab what you need.

Anonymous at 01 Dec, 2009 01:08

excelent article! it's exactly what I was looking for. good written

Comment Formating : HTML tags a, strong, em, b, i, code, pre, p and br allowed. Other tags will be shown as code(< will become <). Urls, Line breaks will be auto-formated.