最近又开始折腾图片上传,继续使用 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 时所需要关注的内容大大减少,需要进行编写的代码也大大减少