Agile Uploader 3.0には、 agile-uploader-3.0.jsというJavaScriptファイルが含まれています。
(このメソッドを使用する場合は、jQueryも必要です。)
このファイルにはコア機能が実装されており、上部にはイベントハンドラー関数のすぐに使用できる例があります。定義は次のように始まります。
$.fn.agileUploaderEvent = function(event) {....
Agile Uploaderを初期化するには、使用するdiv要素で.agileUploader()メソッドを呼び出します。その方法では、オプションを設定することができます。
js_event_handler:
オプション(の子オプションflashVars:
)を、デフォルトを使用する代わりに、独自の関数の名前に設定できます。例:
$(document).ready(function () {
$('#image-uploader').agileUploader({
flashVars: {
js_event_handler: '$.fn.myUploadEventHandler', // <-- HERE!
file_limit: 10,
maxFileMessage: 'The maximum number of files you can upload has been reached.',
... etc
},
flashSrc: '.../your-path-to-the-swf-file/agile-uploader.swf',
... etc
});
次に、関数を定義します。既存のagileUploaderEvent()関数を呼び出して、必要に応じて作業を簡単にし、後で必要に応じて追加の作業を行うことができます。例:
$.fn.myUploadEventHandler = function (event) {
// First call the default event handler (optional, you could completely rewrite)
$.fn.agileUploaderEvent(event);
// Now handle the events we want to
switch (event.type) {
case 'progress':
$.fn.myExtraProgressHandler(event.file); // Call my custom function (handler)
break;
case 'file_already_attached':
console.log('The same file was already attached.'); // Do something useful?
break;
};
};
$.fn.myExtraProgressHandler = function (file) {
if (file.percentEncoded >= 100) {
console.log('File progress reached 100%'); // Just an example...
$("#file-attached").show(); // Do whatever we need to when progress >= 100%
}
};
この例ではjQueryを使用していますが、「単独で実行する」ことを計画している場合は、同じ原則が適用されます。