AJAX Upload with Javascript and PHP: Upload an image and display a preview

A lot of websites ask users to upload an image. The best ones will load and display a preview of that image so the user can remember which picture they chose. This tutorial aims to teach you how to do this, including code for javascript and php. I learned how to do this from this tutorial, but I have added a few things that I found helpful, especially for beginners. For example, I include an example of the PHP code that should accompany the javascript.

First, you need the ajaxupload.js plugin, for which you can find documentation here.

Here is the basic way to use it:

Include jQuery and the ajaxupload.js file in the head section of your document.

<script src='jquery.min.js'></script>
<script src='ajaxupload.js'></script>

Then have HTML something like this:

<form action="submit.php">
     <img id="preview" src="" width="100px" height="100px" />
     <label>Upload a picture: <input id="imageUpload" type="file" name="image"/></label>
      <input type="hidden" name="uploadedImg"></input>
     <input type="submit" value="Save the picture"/>
 </form>

Note that this form includes a hidden field for the uploaded file. After the file is uploaded, we’ll set the value of the hidden field to the image’s url, and that value will be submitted with the form.

Then, initialize the ajaxupload plugin with code like this:

var preview = $('#preview'); //id of the preview image
new AjaxUpload('imageUpload', {
action: 'saveimage.php', //the php script that receives and saves the image
 name: 'image', //The saveimagephp will find the image info in the variable $_FILES['image']
 onSubmit: function(file, extension) {
 preview.attr('src', 'loading.gif'); //replace the image SRC with an animated GIF with a 'loading...' message 
 },
 onComplete: function(file, response) {
 preview.load(function(){
 preview.unbind();
 });
 preview.attr('src', response); //make the preview image display the uploaded file
 $('#uploadedimg').val(response); //drop the path to the file into the hidden field
}
 });

This uses the plugin to set up a listener so that when the user selects a file, the file is sent to saveimage.php. Here is some of the php you need in that file:

<?php $file = $_FILES['image']; // 'image' because that was the name we set in the javascript code
$path = 'http://example.com/images'; //whatever path on the server your images are being stored in
$location = $path. $_FILES["file"]["name"]; //this is where the file will go
move_uploaded_file($_FILES["file"]["tmp_name"], $location); // move the file there
echo $location; //send the file location back to the javascript
?>

And, of course, when the form is submitted to submit.php, you will look for $_POST[‘uploadedimg’] to find where the file was stored and save it in your database or otherwise process it.

NOTE: Any time you allow users to upload files, you potentially expose your website and server to security risks, as hackers can upload executable files that are viruses or can give them access to your server. There are several ways to mitigate this risk. One method for doing this with images is to actually reprocess the image using a PHP extension such as GD or Imagick. Make sure you do something!