/ Work

[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