Uploading a file using Ajax

In this recipe, we will talk about uploading a file via Ajax. Actually, there is no Ajax method to do this. We can use the iframe method to imitate the Ajax functionality.

Getting ready

In the beginning, we will prepare the uploads folder and make sure it is accessible. In Mac OS X/Linux, we will use:

$ sudo chmod 777 'uploads/'

Note

In Windows 7, we can right-click on Folder properties|Edit|Select user| Group from permission windows (choose anyone) and select Full control under the Allow column to assign full access rights control permissions.

Now let's create an HTML (ajaxUpload.html) and a PHP file (ajax/uploadFile.php).

How to do it...

1. ajaxUpload.html will look like the following:

   <script>
   function submitForm(upload_field){
     upload_field.form.submit();
     upload_field.disabled = true;
     return true;
   }
   </script>

2. Our HTML body is as follows:

   <h1>Uploading File Using Ajax</h1>
   
   <form action="ajax/uploadFileSingle.php" target="uploadIframe" 
   ...