jQuery form plugin and PHP file uploads
How to upload a file via Ajax using a form with JQuery and PHP?

Click here to download JQuery files .

  • Create a new file called form_upload.php 
  • Include JQuery and the JQuery Form Plugin between the head tags in the form_upload.php file.
<head>
    <title>Ajax File Uploader</title>

    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>
</head>

Include the following code between the head tags underneath the JQuery Form Plugin include

<script type="text/javascript">
    <!--
        $(document).ready(function() {
            var options = {
            target: '#message', //Div tag where content info will be loaded in
            url:'upload.php', //The php file that handles the file that is uploaded
            beforeSubmit: function() {
                $('#uploader').html('<img src="ajax-loader.gif" border="0" />'); //Including a preloader, it loads into the div tag with id uploader
            },
            success:  function() {
                //Here code can be included that needs to be performed if Ajax request was successful
                $('#uploader').html('');

            }
            };

            $('#upload').submit(function() {
                $(this).ajaxSubmit(options);
                return false;
            });

        }); 
 //-->
 </script>

Between the body tags we include the actual form and necessary div tags.

<div id="message"></div>
    <form name="upload" id="upload" action="#" method="POST" enctype="multipart/form-data">
        <table cellpadding="4" cellspacing="4" border="0">
            <tr>
                <td colspan="2"><h1>Upload File via Ajax</h1></td>
            </tr>
           <tr>
                <td nowrap>File:</td>
                <td nowrap><input type="file" name="fileToUpload" id="fileToUpload" /></td>
            </tr>
            <tr>
                <td nowrap colspan="2"><input type="submit" id="uploadFile" value="Upload File" /></td>
            </tr>   

        </table>
    </form>
    <div id="uploader"></div>
  • Create a file called upload.php this file will handle all request that are posted via the file upload form. Example of upload.php
echo '<pre>';
print_r($_FILES);

The complete code can be obtained below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Ajax File Uploader</title>

    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>

    <script type="text/javascript">
    <!--
        $(document).ready(function() {
            var options = {
            target: '#message', //Div tag where content info will be loaded in
            url:'upload.php', //The php file that handles the file that is uploaded
            beforeSubmit: function() {
                $('#uploader').html('<img src="ajax-loader.gif" border="0" />'); //Including a preloader, it loads into the div tag with id uploader
            },
            success:  function() {
                //Here code can be included that needs to be performed if Ajax request was successful
                $('#uploader').html('');

            }
            };

            $('#upload').submit(function() {
                $(this).ajaxSubmit(options);
                return false;
            });

        }); 
     //-->
    </script>
</head>
<body>
    <div id="message"></div>
    <form name="upload" id="upload" action="#" method="POST" enctype="multipart/form-data">
        <table cellpadding="4" cellspacing="4" border="0">
            <tr>
                <td colspan="2"><h1>Upload File via Ajax</h1></td>
            </tr>
           <tr>
                <td nowrap>File:</td>
                <td nowrap><input type="file" name="fileToUpload" id="fileToUpload" /></td>
            </tr>
            <tr>
                <td nowrap colspan="2"><input type="submit" id="uploadFile" value="Upload File" /></td>
            </tr>   

        </table>
    </form>
    <div id="uploader"></div>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s