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.

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.

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 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 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 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

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??

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 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.

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!.

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.

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.

OpenJS

Popular Pages