jQuery uploadify with PHP

jQuery uploadify with PHP

jQuery uploadify is a powerful multiple file upload utility. It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page. In this tutorial, we will go through the process of using uploadify as the front uploader, and using PHP as the server-side language to store files in the serve. At the end of tutorial, you should be able to use uploadify to your needs, and you are free to download the uploadify example too.

Preparation

Download jQuery Uploadify from official page. The version I am using in this tutorial is Uploadify-v2.1.4.zip.
Create a demo site on your local server, I am using xampp. So I will create a folder "uploadify-php" folder under "C:\xampp\htdocs\uploadify-php".
Extract downloaded zip files. Copy and paste files "uploadify.css", "jquery-1.4.2.min.js","jquery.uploadify.v2.1.4.min.js"," swfobject.js", "uploadify.swf" and "cancel.png" to our demo site, and create a "js" folder to accommodate js files and "css" folder to accommodate css file.
Last step for preparation is to create two blank php files "index.html" and "upload.php" inside our demo site and a folder "uploads". "index.html" will be the front page showing the Uploadify button and "upload.php" will handle backend upload process. "uploads" folder will contain all the uploaded files.
At the end of the preparation, you should have a directory structure looks like this:

Work with Uploadify

1.Create a basic html layout as below, we will use a very simple form for the front end, since our main purpose is to learn how to use jQuery Uploadify with PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
</body>
</html>

Link Uploadify's css and js files in the HEADER section of the html document.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
                 
<link href="css/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.v2.1.4.min.js"></script>
 
</head>
<body>
</body>
</html>

Create a DOM element for the upload button in the BODY section. In our case, we will use :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
                 
<link href="css/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.v2.1.4.min.js"></script>
 
</head>
<body>
<input id="file_upload" name="file_upload" type="file" />
</body>
</html>

Let us go back to the HEADER section of the document and make a uploadify object out of the input element we have just created above:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
                 
<link href="css/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.v2.1.4.min.js"></script>
 
<script type="text/javascript">
$(document).ready(function() {
  $('#file_upload').uploadify({
    'uploader'  : 'js/uploadify.swf',
    'script'    : 'upload.php',
    'cancelImg' : 'js/cancel.png',
    'folder'    : 'uploads',
    'auto'      : true
  });
});
</script>
 
</head>
<body>
<input id="file_upload" name="file_upload" type="file" />
</body>
</html>

line 15: Relative path to the uploadify.swf file. line 16: PHP script which will handle the upload process. line 17: Relative path to the cancel image. line 18: Folder used to store the uploaded files, make sure PHP has write access to this folder. line 19: Auto start.

Open your browser and go to http://localhost/uploadify-php/index.html, you should be able to see something simliar: But it won't work if you try, and you should see an error message:
That is all right if you see the error message above, that is because we have not yet completed the backend part, which will handle the upload process. Let us proceed to step 3.

Work with PHP

The PHP file which will handle the upload process is "upload.php" which we have specified above and created in preparation step. Open "upload.php" and past code below:

<?php
if (!empty($_FILES)) {
    $tempFile = $_FILES['Filedata']['tmp_name'];                          // 1
     
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';  // 2
    $targetFile =  str_replace('//','/',$targetPath) . $_FILES['Filedata']['name']; // 3
         
    if( move_uploaded_file($tempFile,$targetFile)){                       // 4
        echo true;
    }else{
        echo false;
    }
         
}
?>

1: Uploadify will pass the uploaded file object using $_FILES['Filedata'] automatically.
2: Find the absolute path to our target folder.
3: Form the absolute path of target file.
4: Move the uploaded file over to our target folder.

Now go ahead and play with the front page, you should be able to see files in "uploads" folder once you have uploaded.

Download

Download the tutorial application source code here. That is all for jQuery Uploadify with PHP. Once you have successfully done this tutorial. You can study further by customizing jQuery Uploadify's options. Here is the link to available options.

The End

Thank you for reading this article, and if you have any encountered anything different, have a different solution or think our solution is wrong, do let us know in the comment section. We will be very happy to hear that.

If you like our tutorial, please follow us on Twitter and help spread the word. We need your support to continue.

#jQuery uploadify with PHP

#Preparation

#Work with Uploadify

#Work with PHP

#Download

#The End