File Upload With Ajax

When you have the code, it is fairly easy to implement a system that uses Ajax for file uploading. This article makes the Ajax code available.

As with regularly-submitted forms, you will need software on the server where information about the file to upload and any other form content can be submitted to.

Ajax is a good tool when the web browser needs to remain on the page with the form. A non-Ajax, regularly-submitted form can be used when the browser is to go to a different page, generally a thank‑you page.

Master Form .PHP and Master Form V4 are versatile, well-tested, and secure software for accepting form submissions. Each has effective form-spamming protection that doesn't require the user to engage with a CAPTCHA.

Further below, I'll provide the JavaScript to use for uploading a file with Ajax. Then, the upload form.

But first, let me make this offer. For testing that your Ajax upload form works as it should, the PHP script below is available to use. When a form is submitted to the PHP script (regularly-submitted or with Ajax), it responds with any POST, GET, and FILES values it received. (It doesn't send email or store the values or anything else, just responds with whatever information it receives.)

The PHP script is wonderful for testing when you wish to be certain the information submitted is what should have been submitted.

Although it may have any PHP file name, let's name the software DumpAjax.php for illustration purposes. Here is the source code.

<?php
$output = '';
$output .= "\$_POST:\n" . print_r($_POST,true);
$output .= "\n\n\$_GET:\n" . print_r($_GET,true);
$output .= "\n\n\$_FILES:\n" . print_r($_FILES,true);
echo $output;
?>

Upload DumpAjax.php to your server anywhere a browser has access to it. Make a note of its URL because you'll need it when you get to the source code of the example form. (Ajax uses the same protocol as browsers, which is why DumpAjax.php must be browser-accessible.)

The File Upload Ajax JavaScript

Although the Ajax JavaScript was written for uploading files, it still works even if the form doesn't have a file upload field.

(In other words, although this article is focused on file uploads, the Ajax JavaScript as written for this article by intention can be used for all forms — whether or not they upload a file. The reason it was built that way is so you don't have to replace the Ajax code if you decide a form no longer needs a file upload field.)

Here is the Ajax JavaScript. Notes follow.

<script>
function AjaxSubmissionResponse()
{
    // Update this function according to what you 
    //    want to happen after the form submits.
    alert( "Thank you!\n\n" + this.responseText );
}

function SubmitViaAjax(dform)
{
    var http = new XMLHttpRequest();
    http.onload = AjaxSubmissionResponse;
    http.open("post",dform.action);
    http.send(new FormData(dform));
}
</script>

Notes:

The only customization is to tell the function AjaxSubmissionResponse() what you want to happen at the browser window after the form has been submitted.

You'll notice code within the function AjaxSubmissionResponse() is all green lines of text. That's because you have free rein to replace it and tell the JavaScript to do whatever you want it to do.

Examples of what can be done are spawning an alert box with information, revealing a div with information, inserting content somewhere, removing the form or replacing it with something else — whatever you want to do that JavaScript can do.

Currently, function AjaxSubmissionResponse() spawns an alert box with "Thank you!" and this.responseText (the content the file processing script responds with).

The File Upload Form

The file upload form can contain any form fields. No minimum or maximum is enforced. File upload fields are optional.

The attributes of the form tag are important to address, though. Notes follow after this example form code.

<form action="/subdirectory/DumpAjax.php" method="post" enctype="multipart/form-data" onsubmit="SubmitViaAjax(this); return false;">
<p>
Email: <input type="email" name="email">
</p>
<p>
Name: <input type="text" name="name">
</p>
<p>
Upload: 
<input type="file" name="image">
</p>
<p>
<input type="submit" value="Submit Form">
</p>
</form>

Notes:

Keep the entire form tag as is except replace /subdirectory/DumpAjax.php with the URL to the software on your server where the form contents will be submitted to. If you are using DumpAjax.php, then update the URL to the script.

Let's talk about each attribute in the form tag:

• Attribute action —

  This attribute value is the URL to the software on your server where the form contents will be submitted to. In the above code, the URL is /subdirectory/DumpAjax.php and will need to be updated for your implementation.

• Attribute method —

  This must be method POST. Keep the attribute method="post" like it is in the above code.

• Attribute enctype —

  Keep the attribute enctype="multipart/form-data" like it is in the above code. There are other enctype values that can be specified for forms. But this Ajax upload method requires multipart/form-data as the value.

• Attribute onsubmit —

  Keep the attribute onsubmit="SubmitViaAjax(this); return false;" like it is in the above code. SubmitViaAjax(this) submits the form contents to the Ajax JavaScript function SubmitViaAjax and return false; prevents the form from being submitted the normal way.

Implementing the File Upload Form and Ajax

Put the file upload Ajax JavaScript and the file upload form in the source code of the same web page. The JavaScript may be imported from an external file.

The file's form tag action attribute value needs to be the URL of the software to receive the form submission information. Because it is Ajax, the software to receive the form submission needs to be on the same domain as the form and Ajax JavaScript.

It is a surprisingly easy method to upload files with Ajax.

You may use the dumpAjax.php script (source code further above) for testing the form.

(This article first appeared in Possibilities newsletter.)

Will Bontrager