Documentation
Uploadify was created to be an easy-to-implement solution for multiple file uploads. As a jQuery plugin, the Uploadify implementation is simple and highly-customizable.
While it may require a foundational knowledge of jQuery to successfully implement, this documentation should provide a comprehensive enough reference for those who are having trouble. If you are running into issues that this documentation can't help solve, there is an active community of Uploadify users that can be accessed through the forums. In addition, we've provided a list of FAQs that may also aid in troubleshooting your Uploadify instance.
Implementation
Before implementing an instance of Uploadify, make sure the minimum requirements are met:
-
jQuery 1.4.x or greater
-
swfObject 2.2 or greater
-
Flash Player 9.0.24 or greater
Download the latest zip package. Extract the following files to a folder named "uploadify" in the root of your website.
-
cancel.png
-
jquery.uploadify.v2.1.4.min.js
-
jquery-1.4.2.min.js
-
swfobject.js
-
uploadify.css
-
uploadify.php
-
uploadify.swf
Save a new page to the root directory of your website and paste the following code into the section:
Head Section
-
<link href="/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
-
<script type="text/javascript" src="/uploadify/jquery-1.4.2.min.js"></script>
-
<script type="text/javascript" src="/uploadify/swfobject.js"></script>
-
<script type="text/javascript" src="/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
-
<script type="text/javascript">
-
$(document).ready(function() {
-
$('#file_upload').uploadify({
-
'uploader' : '/uploadify/uploadify.swf',
-
'script' : '/uploadify/uploadify.php',
-
'cancelImg' : '/uploadify/cancel.png',
-
'folder' : '/uploads',
-
'auto' : true
-
});
-
});
-
</script>
*Make sure the folder you are uploading to exists and has write permissions.
In the body section of the page, add the following code:
Body Section
-
<input id="file_upload" name="file_upload" type="file" />
When the page is loaded, the file input will automatically be replaced with the Uploadify file uploader.
Notes
-
We highly recommend using paths that are relative to the root (AKA begin with a /). If this isn't possible, Uploadify does play nice with links that are relative to the page.
-
Every element that Uploadify is applied to MUST have a unique ID attribute. You can reference elements via class, but each element must have a unique ID.
For a more customized uploader, use the options below.
Options
(boolean)
auto
Automatically upload files as they are added to the queue.
(string)
buttonImg
The path to an image you would like to use as the browse button.
(string)
buttonText
The text that appears on the default button.
(string)
cancelImg
The path to an image you would like to use as the cancel button.
(string)
checkScript
The path to the back-end script that checks for pre-existing files on the server.
(string)
displayData
The type of data to display in the queue item during an upload.
(string)
fileDataName
The name of your files array in the back-end script.
(string)
fileDesc
The text that will appear in the file type drop down at the bottom of the browse dialog box.
(string)
fileExt
A list of file extensions that are allowed for upload.
(string)
folder
The path to the folder where you want to save the files.
(integer)
height
The height of the browse button.
(boolean)
hideButton
Enable to hide the flash button so you can style the underlying DIV element.
(string)
method
The form method for sending scriptData to the back-end script.
(boolean)
multi
Allow multiple file uploads.
(string)
queueID
The ID of the element on the page you want to use as your file queue.
(integer)
queueSizeLimit
The limit of files that can be in the queue at one time.
(boolean)
removeCompleted
Enable automatic removal of the queue item for completed uploads.
(boolean)
rollover
Enable to activate rollover states for your browse button.
(string)
script
The path to the back-end script that will process the file uploads.
(string)
scriptAccess
The access mode for scripts in the main swf file.
(JSON object with mixed types)
scriptData
An object containing name/value pairs with additional information that should be sent to the back-end script when processing a file upload.
(integer)
simUploadLimit
The limit of uploads that can run simultaneously per Uploadify instance.
(integer)
sizeLimit
The size limit in bytes for each file upload.
(string)
uploader
The path to the uploadify.swf file.
(integer)
width
The width of the browse button.
(string)
wmode
The wmode of the flash file.
Events
(function)
onAllComplete
Triggers once when all files in the queue have finished uploading.
(function)
onCancel
Triggers once for each file that is removed from the queue.
(function)
onCheck
Triggers at the beginning of an upload if a file with the same name is detected.
(function)
onClearQueue
Triggers once when the uploadifyClearQueue() method is called.
(function)
onComplete
Triggers once for each file upload that is completed.
(function)
onError
Triggers when an error is returned for a file upload.
(function)
onInit
Triggers when the Uploadify instance is loaded.
(function)
onOpen
Triggers once when a file in the queue begins uploading.
(function)
onProgress
Triggers each time the progress of a file upload changes.
(function)
onQueueFull
Triggers when the number of files in the queue matches the queueSizeLimit.
(function)
onSelect
Triggers once for each file that is added to the queue.
(function)
onSelectOnce
Triggers once each time a file or group of files is added to the queue.
(function)
onSWFReady
Triggers when the flash file is done loading.
