[WWW] Plupload Queue 改

上次介紹過這個超犯規上傳檔案工具，這次要來繼續犯規。

由於我們需要監聽檔案上傳的動作，我們看他的 API 文件中，有描述了 Event 的項目，但是，倘若使用 pluploadQueue 的方法，他所內建的 Event 就被他的 Queue 給寫死了，從外部就沒辦法直覺的控制。當然，要避免這種情況，就是自己重新畫一個 UI 來用（翻桌）。

所以，既然人家已經好心的幫我們畫好了一個 UI（而且還可以支援多國語言），那就不要枉費人家的一番好意，拿來改寫也只是剛好而以。附帶一提，他的多語言檔案少了一個設定，請自行加入：

    // .po file like language pack
    plupload.addI18n({
        'Select files' : '選擇檔案',
        'Add files to the upload queue and click the start button.' : '將檔案加入上傳排程後按開始鈕開始上傳。',
        'Filename' : '檔案名稱',
        'Status' : '狀態',
        'Size' : '大小',
        'Add files' : '加入檔案',
        'Start upload' : '開始上傳',  /// 這個項目漏掉了，請自行加入。
        'Stop current upload' : '停止當前上傳',
        'Start uploading queue' : '開始排程上傳',
        'Drag files here.' : '拖曳檔案至此'
    });

首先打開 jquery.plupload.queue.js 的原始檔，我們會發現他的 Event 控制在檔案的最下面。

    /// 前略，約莫在 193 行開始
    uploader.bind("UploadFile", function(up, file) {
        $('#' + file.id).addClass('plupload_current_file');
    });

    /// 中間有一段 Init, Error 的 Event，也暫且略過。

    uploader.bind('QueueChanged', updateList);

    uploader.bind('StateChanged', function(up) {
        if (up.state == plupload.STOPPED) {
            updateList();
        }
    });

    uploader.bind('FileUploaded', function(up, file) {
        handleStatus(file);
    });

    uploader.bind("UploadProgress", function(up, file) {
        // Set file specific progress
        $('#' + file.id + ' div.plupload_file_status', target).html(file.percent + '%');

        handleStatus(file);
        updateTotalProgress();
    });

    /// 前略，約莫在 79 行
    $.fn.pluploadQueue = function(settings, callback) {   /// 我們在此加入 callback 這個物件。

我以 FileUploaded 這個 Event 來舉例：

uploader.bind('FileUploaded', function(up, file, response) {
    handleStatus(file);
    if($.isFunction(callback.FileUploaded)) callback.FileUploaded(up, file, response);
});

$(function() {
    // Setup flash version
    $("#flash_uploader").pluploadQueue({
        // General settings
        runtimes : 'flash',
        url : 'upload.php',
        max_file_size : '10mb',
        chunk_size : '1mb',
        unique_names : true,
        multipart: true,
        resize : {width : 320, height : 240, quality : 90},
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip"}
        ],

        // Flash settings
        flash_swf_url : '../js/plupload.flash.swf'
    },
    {
        /// 這裡就是我們要丟進 callback 的 Object 內容，包含了個種 Event 的名稱，以及要被呼叫的 function。
        'FileUploaded': function(up, file) {
            // do something here
        }
    });
});

另外，他有一個官方 API 所沒有的 Event 叫做 Error，到底他會傳回甚麼我也不清楚。但是依照 pluploadQueue 對於這個 Event 的處理，看起來就是將上傳錯誤的檔案標記為錯誤，僅此而以。

我將這個 jquery.plupload.queue.js 改寫了，其中有包含了：

UploadFile
Error
StateChanged
QueueChanged
FileUploaded
UploadProgress

也許你會好奇為什麼沒有包含 Init 這個監聽，因為在 pluploadQueue 中，有一個 preinit function 可以呼叫，這也是官方沒有寫進去的東西，這個 preinit 是包含在 setting 中，可以由 setting 傳入一個 function 來做一些事情，這些事情會在呼叫 Init 之前就先執行，所以我也不再多將 Init 改寫了（要改的人請自便）。

    /// 呼叫的方法如下：
    $(function() {
		$("#flash_uploader").pluploadQueue({
		        // General settings
		        // 略
		    }, {
		        'UploadFile' : function (up, file) { ... },
		        'Error' : function (up, err) { ... },
		        'StateChanged' : function (up) { ... },
		        'QueueChanged' : function (up) { ... },
		        'FileUploaded' : function (up, file, response) { ... },
		        'UploadProgress' : function (up, file) { ... },

		    });
	});

檔案在此：https://gist.github.com/hinablue/9a82ee36e0bce46413c4

You might also like...