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.
Table Of Content
- 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:
- 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:
- Link Uploadify's css and js files in the HEADER section of the html document.
- Create a DOM element for the upload button in the BODY section. In our case, we will use <input>:
- 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:
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
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.
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:
- 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 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.
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.
You might also want to check out course Uploading Files Securely with PHP from lynda.com.