前言

sdlog中需要一个图片上传的功能,而网上常用的jquery上传插件就是Uploadify,说实话,我从Uploadify2.14,3.0,3.1,3.2几个版本测试使用过来没有一个称心的,其实是都没使用成功。

2和3版本参数不一致,3.1报错在upload函数中534行,原因:swfuploadify.queueData未定义,其实是$this.data('uploadify')中定义的值丢失。3.2版本中报错:$.tmpl($itemTemplate, itemData)函数未定义,在这种情况下我决定自己做个JQuery上传插件。

情况说明:

1.$this.data('uploadify')中定义的值丢失的问题是因为使用了一个jquery对话框插件lhgdialog.js,如果先初始化uploadify然后初始化对话框,则$this.data('uploadify')中定义的值丢失,因此需要先对话框,在对话框的init函数中初始化uploadify;

2.session丢失问题,因为uploadify使用swfupload,用户的user-agine变更了,因此session不被服务器接受,php等语句可以将sessionid作为url参数传给服务器进行覆盖,但是django的session是基于cookie的因此无法这样实现。

准备

连接:跟我一起学写jQuery插件(附完整实例及下载)

jQuery插件开发全解析

知识点:

1.each函数说明。使用普通函数时,在指定对象上自己的插件执行完毕无法再执行其他函数,而用each方法则可以,因此网上有人说这是链表方法,我觉得要看了例子才能理解。

普通Jquery对象方法定义和顶用如下:

//函数定义
jQuery.fn.test = function(){
     alert("这是jQuery对象方法!");
}
//函数调用
$(function(){
     $("input").click(function(){
         $(this).test();
     });
});

使用each方法定义和调用如下:

//函数定义
jQuery.fn.test = function(){
       return this.each(function(){
         alert(this.nodeName);
       });
}
//函数调用
$(function(){
       $("body *").click(function(){
         $(this).test().html(this.nodeName).hide(4000); //连写
       });
});

2.函数命名空间的问题

代码例子如下:

//插件定义
$.fn.sdupload = {
        /**
         * 介绍:入口函数,相当于构造函数
         */
        init: function(options){ 
            //各种属性、参数 
            var defaults = {
                        
            }
            //功能:如果options中定义参数就用options中的参数,如果没有就用defaults中的值
            var opts =  $.extend(defaults, options);
            return this.each(function(){ 
                //插件实现代码 
                var $this = $(this);
                alert('init');
            }); 
        },
        /**
         * 功能:如果options中定义参数就用options中的参数,如果没有就用defaults中的值
         */
        upload: function() {
            var $this = $(this);
            alert('This is a test. This is only a test.');
        }
    }
//函数使用
$('#div1').sdupload.init({key:'value'});
$('#div1').sdupload.upload();

上面的例子使用了命名空间概念,但有个问题在$.fn.sdupload.init函数中,return this.each时报错,因为this此时不是一个jquery对象,而是命名空间自己$.fn.sdupload,这样我们得不到$('#div1')对象,许多操作无法展看,因此不可取。

或许此时可以取到$('#div1')对象,但我还不知道方法。

框架
/***
    name: jquery.sdupload.js
    designer: kukei
    Copyright(C) 2011 SupDo.com
    Create Date: 2012-09-05
    Modify Date: 2012-09-05
***/
  
(function($){ 
    methods = {
        /**
         * 介绍:入口函数,相当于构造函数
         */
        init: function(options){ 
            return this.each(function(){ 
                var $this = $(this);
                var $clone = $this.clone();
                var settings =  $.extend({
                    //必填项
                    id:             $this.attr('id'),
                    uploader:   'uploadify.php',
                    //可选项
                }, options);
            }); 
        },
        /**
         * 功能:如果options中定义参数就用options中的参数,如果没有就用defaults中的值
         */
        upload: function() {
            var $this = $(this);
            alert('This is a test. This is only a test.');
        }
    }
    $.fn.sdupload = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('这个函数  ' + method + ' 在 $.sdupload中不存在!');
        }
    }
})($);

这个可以作为通用的JQuery插件框架。