Download
User Rating: 0/5 ( 0 votes)
Uploadify™ is a jQuery plugin that allows you to easily add multiple file upload functionality to your website. Two distinct versions (HTML5 and Flash) allow you the flexiblity to choose the right implementation for your site and fallback methods make it degrade gracefully.
Some features include:
Multiple File Uploads
The main benefit of Uploadify is its ability to allow multiple file uploads without the hassle of clicking multiple browse buttons or submitting multiple forms.
Drag and Drop
The HTML5 version of our file uploader (UploadiFive) allows you to drag and drop files onto the queue to add them instantly.
Real-Time Progress Indicators
While files are being uploaded, progress bars show the current upload progress so your users don’t have to second guess how long uploading files is going to take.
Custom Upload Restrictions
Set file size limits, file count limits, file type limits, and simultaneous upload limits with ease to ensure your servers are free from abuse.
Extreme Customization
Almost every aspect of Uploadify is fully customizable, allowing you the freedom to create an uploader that does exactly what you need it to.
Implementing Uploadify
Uploadify was designed to make implementation as easy as possible. Before implementing, make sure you meet the minimum requirements.
Requirements
-
jQuery 1.4.x or greater
-
Flash Player 9.0.24 or greater
-
A server capable of parsing PHP, ASP.Net, Cold Fusion, or similar server-side language
Implementation
For the most basic implementation, follow the steps below:
1. Download the Uploadify Zip Package. It’s FREE!
2. Unzip the package and upload the following files into a folder on your website:
-
jquery.uploadify-3.1.min.js
-
uploadify.php
-
uploadify.swf
-
uploadify.css
-
uploadify-cancel.png
-
check-exists.php (to check for existing files in your destination folder)
3. On the page you are implementing Uploadify on, add a reference to the jQuery library.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
4. Below the reference to jQuery, add a reference to the Uploadify script.
<script type="text/javascript" src="/jquery.uploadify-3.1.min.js"></script>
5. On the page, add a file input (or any other element with an ID works).
<input type="file" name="file_upload" id="file_upload" />
6. Initialize Uploadify on the file input.
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php'
// Put your options here
});
});
7. Add a link to the Uploadify stylesheets in the head of the document.
<link rel="stylesheet" type="text/css" href="uploadify.css" />
8. Create the upload destination folder on your server and give it the proper permissions (0755 if you’re not sure).
9. Update your uploadify.php script to point to your destination folder.
10.Check out our article on Making Uploadify Secure to make your site more secure.
The final page should look like the following:
<!DOCTYPE html>
<html>
<head>
<title>My Uploadify Implementation</title>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php'
// Your options here
});
});
</script>
</head>
<body>
<input type="file" name="file_upload" id="file_upload" />
</body>
Options
-
auto
-
buttonClass
-
buttonCursor
-
buttonImage
-
buttonText
-
checkExisting
-
debug
-
fileObjName
-
fileSizeLimit
-
fileTypeDesc
-
fileTypeExts
-
formData
-
height
-
itemTemplate
-
method
-
multi
-
overrideEvents
-
preventCaching
-
progressData
-
queueID
-
queueSizeLimit
-
removeCompleted
-
removeTimeout
-
requeueErrors
-
successTimeout
-
swf
-
uploader
-
uploadLimit
-
width
Events
-
onCancel
-
onClearQueue
-
onDestroy
-
onDialogClose
-
onDialogOpen
-
onDisable
-
onEnable
-
onFallback
-
onInit
-
onQueueComplete
-
onSelect
-
onSelectError
-
onSWFReady
-
onUploadComplete
-
onUploadError
-
onUploadProgress
-
onUploadStart
-
onUploadSuccess
Methods
-
cancel
-
destroy
-
disable
-
settings
-
stop
-
upload
More information at: http://www.uploadify.com/documentation
JS Tutorial
