// File Upload Settings file_size_limit: "50 MB", file_types: "*.csv", file_types_description: "CSV files", file_upload_limit: 0, // Zero means unlimited
// Event Handler Settings - these functions as defined in Handlers.js // The handlers are not part of SWFUpload but are part of my website and control how // my website reacts to the SWFUpload events. swfupload_preload_handler: preLoad, swfupload_load_failed_handler: loadFailed, file_queue_error_handler: fileQueueError, file_dialog_complete_handler: fileDialogComplete, upload_progress_handler: uploadProgress, upload_error_handler: uploadError, upload_success_handler: uploadSuccess, upload_complete_handler: uploadComplete,
// Flash Settings flash_url: "../../swfupload/swfupload.swf", // Relative to this file flash9_url: "../../swfupload/swfupload_FP9.swf", // Relative to this file
// File Upload Settings file_size_limit: "50 MB", file_types: "*.csv", file_types_description: "CSV files", file_upload_limit: 0, // Zero means unlimited
// Event Handler Settings - these functions as defined in Handlers.js // The handlers are not part of SWFUpload but are part of my website and control how // my website reacts to the SWFUpload events. swfupload_preload_handler: preLoad, swfupload_load_failed_handler: loadFailed, file_queue_error_handler: fileQueueError, file_dialog_complete_handler: fileDialogComplete, upload_progress_handler: uploadProgress, upload_error_handler: uploadError, upload_success_handler: uploadSuccess, upload_complete_handler: uploadComplete,
// Flash Settings flash_url: "../../swfupload/swfupload.swf", // Relative to this file flash9_url: "../../swfupload/swfupload_FP9.swf", // Relative to this file
Place the jQuery library in js folder, extract the SWFUpload jQuery Plugin somewhere and copy the jquery.swfupload.js in the src folder to the js folder. Also, copy the swfupload folder inside vendor folder of SWFUpload jQuery Plugin to js Folder. Here’s what your folder structure should look like.
Add reference to jQuery library and then jquery.swfupload.js in the head tag of your page.
HTML Structure Since we will be using SWFUpload, we’ll need a container that will act as placeholder for SWFUpload button, and a list to show the queue of files.
<p>Upload upto 5 image files(jpg, png, gif), each having maximum size of 1MB(Use Ctrl/Shift to select multiple files)</p>
03
04
<inputtype="button"id="button"/>
05
06
<pid="queuestatus"></p>
07
08
<olid="log"></ol>
09
10
</div>
11
12
<divid="swfupload-control">
13
14
<p>Upload upto 5 image files(jpg, png, gif), each having maximum size of 1MB(Use Ctrl/Shift to select multiple files)</p>
15
16
<inputtype="button"id="button"/>
17
18
<pid="queuestatus"></p>
19
20
<olid="log"></ol>
21
22
</div>
23
24
CSS Styles
25
26
Here are some CSS styles to stylize our File Uploader, modify them as you want. Important ones are .progressbar and .progress that define the progress bar for file upload, you can adjust their height and color.
// upload has completed, try the next one in the queue
174
175
$(this).swfupload(’startUpload’);
176
177
})
178
179
});
180
181
Code Explanation
182
183
Since we are using SWFUpload jQuery Plugin, firstly we initialize it on the placeholder element using the $(’#placeholder’).swfupload({ settings }) function and pass it a settings object that defines various parameters like server side file that will handle uploads, maximum size of the file, number of maximum uploads, allowed file types, button url, button size etc. For complete detail of settings you can use, refer to SWFUpload docs.
At this stage, your file upload script will work but will not show any visual clue to users about the upload. SWFUpload fires certain events that we can use to provide information to user about the file uploads. So, next thing is to bind functions to various events to show required output. That’s what all bind calls are doing. They are pretty much self-explanatory.
Limitations Since this script uses SWFUpload to upload files, which requires flash plugin, so this will not work if flash plugin is not installed in end user’s browser. Make sure to provide an alternative upload form so that users without flash can upload files.
Also, SWFUpload has some known issues when used on linux systems and if user is behind proxies. Make sure to read them before you use it in production environment.
