When I first stumbled across SWFUpload about two years ago I was impressed by how easy it was to implement. However, their example code has always bugged me as being rather crap, having to assign a separate global event handler for each event, and the lack of multiple handlers for a single event.
Using jQuery (the solution to all things painful), I've written a plugin to create a real event dispatcher for SWFUpload without modifying the SWFUpload core!
The SWFUpload jQuery Plugin
This plugin makes working with SWFUpload easier!
Get straight to the source code at my SWFUpload jQuery Plugin repository on GitHub.
And the benefits are...
■Native jQuery event handling using .bind()
■Ability to assign multiple callbacks per event
■Makes multiple SWFUpload instances on a single page easier to manage
■Ability to completely separate SWFUpload object from UI code (callbacks)
■Assign event handlers before SWFUpload instance is even created!
■No global functions or variables needed!
■A nice, chainable solution!
Live Examples
Here are some live examples you can pull apart. Although the UI is not pretty, it demonstrates how you listen to events, and from there you can create whatever UI you want.
Although these examples upload to a PHP script on my server, the uploaded files are not saved.
■Single Uploader
■Multiple Uploaders
How do I use it?
If you know how to use SWFUpload already, the following should be fairly easy to consume.
$(function(){
$('.swfupload-control').swfupload({
// Backend Settings
upload_url: "../upload.php", // Relative to the SWF file (or you can use absolute paths)
// File Upload Settings
file_size_limit : "102400", // 100MB
file_types : "*.*",
file_types_description : "All Files",
file_upload_limit : "10",
file_queue_limit : "0",
// Button Settings
button_image_url : "../multiinstancedemo/XPButtonUploadText_61x22.png", // Relative to the SWF file
button_placeholder_id : "spanButtonPlaceholder",
button_width: 61,
button_height: 22,
// Flash Settings
flash_url : "../swfupload/swfupload.swf"
});
// assign our event handlers
$('.swfupload-control')
.bind('fileQueued', function(event, file){
// start the upload once a file is queued
$(this).swfupload('startUpload');
})
.bind('uploadComplete', function(event, file){
alert('Upload completed - '+file.name+'!');
// start the upload (if more queued) once an upload is complete
$(this).swfupload('startUpload');
});
});
Rather than creating a SWFUpload instance and assigning handlers directly, it associates the SWFUpload instance with an element in the DOM, and all events handlers are bound to that DOM element.
Calling methods on the SWFUpload instance
The following code will execute the startUpload method on all SWFUpload instances that exist within the selector .your-swfupload-control.
$('.your-swfupload-control').swfupload('startUpload');
Getting properties on the SWFUpload instance
Sometimes you just need to get at the SWFUpload instance... easy!
var swfu = $.swfupload.getInstance('.some-selector-for-your-control');
alert(swfu.settings.custom_settings.your_custom_setting);
Additional event handlers
Due to the way SWFUpload works, all event names must be defined before the SWFUpload instance is created. This means if you are using any plugins that define additional events, you'll need to add them to the handler list before the SWFUpload instance is created.
$.swfupload.additionalHandlers('some_plugin_handler');
The source code
If you missed it the first time, you can download all the source code including all support files and example files from my SWFUpload jQuery Plugin repository on GitHub.
Enjoy!
رابط الموضوع : http://github.com/ifunk/swfupload-jquery-plugin/tree/master
ليست هناك تعليقات:
إرسال تعليق