动态修改 uploadify 对象的事件处理

最近又开始折腾图片上传，继续使用 uploadify 最为上传组件，然后编写了一个小代码把当前页面内所有的 file对象自动设置为 uploadify 对象，这个时候需求来了，因为不同的上传对象，对上传后处理的内容不一致，有的要求把上传后的地址插入到文档中，有的将值赋值到某个控件，有的干脆放隐藏域，这下麻烦了，以前我就是每个file对象编写一个uploadify初始方法，现在可不想这么干了，不管了，先把自动变成uploadify对象的方法实现出来

// 先定义一个全局对象，用以存放 uploadify 对象
// 因为我查了半天，也没有在 window 对象列表里找到 uploadify 设置之后的对象列表
// 仔细观察后，发现 uploadify 是在 jQuery 对象中追加了 uploadify、uploadifySettings 等方法
(function(){
    if (window.CaigouUpload) return;
    if (!window.CaigouUpload) {
        window.CaigouUpload = {
            init: function () {
                $('input:file').each(function () {
                    window.CaigouUpload.setUploadify($(this));
                });
            },
            queue: { length: 0 },
            setUploadify: function (o) {
                var id = o.attr('id');
                // 一般性 uploadify 初始代码
                $('#' + id).uploadify({
                // uploadify 通用初始设置
                });
            }
        };
    }
})()

这样做完之后，只需要在 $(document).ready 中追加 CaigouUpload.init() ，所有file对象自动变成 uploadify对象了

然后，我们开始进行更精确的需求实现吧，首先，把每个初始化后的 uploadify 放到指定的队列 queue中

在 setUploadify 中追加以下代码

                if (!window.CaigouUpload.queue[id]) window.CaigouUpload.queue.length++;
                window.CaigouUpload.queue[id] = {
                    obj: window.queue,
                    settings: { length: 0 },
                    set: function (key, val) {
                        if (typeof (key) == 'object') {
                            for (var i in key) {
                                this.set(i, key[i]);
                            }
                        } else {
                            if (!this.settings[key]) this.settings.length++;
                            this.settings[key] = val;
                        }
                    }
                };

这些是将 uploadify 自己初始化之后的 queue 对象放入到 window.CaigouUpload.queue 中，并进行计数

同时，我们在这里设置了两个对象，settings属性，存放用来准备动态修改uploadify对象的属性集合，set 方法，用来将需要修改的属性传递给 settings 属性

好了，初始准备工作这就完成了，那么开始本文的正题，如何实现动态修改事件响应

让我们回到 uploadify 初始设置对象

                $('#' + id).uploadify({
                    //指定上传控件的主体文件，默认'uploader.swf'
                    'uploader': '......',
                    //指定服务器端上传处理文件
                    //'script': '........',
                    //上传成功执行类型
                    onComplete: function (event, queueID, fileObj, response, data) {
                       //上传完成后执行的代码
                    }
                });

例如，我们想修改 onComplete 执行的内容，只需要在 onComplete 中最开始的位置追加以下代码

                        if (window.CaigouUpload.queue[id]) {
                            var settings = window.CaigouUpload.queue[id].settings;
                            if (settings['onComplete']) {
                                settings['onComplete'](event, queueID, fileObj, response, data);
                                return;
                            }
                        }

这样，在上传完成后，他就会自动去对应的uploadify上传对象队列中查找是否有 onComplete 定义了，如果有对应的定义，则执行，否则，则按照之前初始设置的代码执行

那么，我们还需要修改上传处理程序，或者其他属性（非方法，方法修改参考onComplete），那么就在 onSelect 里进行设置吧，代码如下

                        if (window.CaigouUpload.queue[id] && window.CaigouUpload.queue[id].settings.length) {
                            var settings = window.CaigouUpload.queue[id].settings;
                            for (var key in settings) {
                                if (key != 'length' && typeof (settings[key]) != 'function') {
                                    $('#' + id).uploadifySettings(key, settings[key]);
                                }
                            }
                            if (settings['onSelect']) {
                                settings['onSelect'](e, queueId, fileObj);
                                return;
                            }
                        }

这样，我们自动实现了 uploadify 初始化，然后在使用的时候加上这些就可以动态修改uploadify的设置了

        $(document).ready(function () {
            window.CaigouUpload.init();
            window.CaigouUpload.queue['upload1'].set({
                'script': '.....',
                'onComplete': function (event, queueID, fileObj, response, data) {
                }
            });
            window.CaigouUpload.queue['upload2'].set({
                'script': '.....',
                'onComplete': function (event, queueID, fileObj, response, data) {
                }
            });
        });

如此以来，我们在使用 uploadify 时所需要关注的内容大大减少，需要进行编写的代码也大大减少