liteUploader上傳控件的封裝使用

　

//原來的綁定方式 
 $('#' + frm_name).liteUploader({
        script: url,
        params: {
            type: "image",
            size: size
        },
        singleFileUploads: false
    }).on("lu:success", function (e, response) {
        var json = JSON.parse(response);
        return function (res) { json; };

    }).on('lu:error', function (e, response) {
        var json = JSON.parse(response);

    });

    $('#' + frm_name).change(function () {
        $(this).data("liteUploader").startUpload();
    });

liteUploader插件兼容性比較好，並且很小巧，相對於某些控件可能依賴flash或者須要綁定表單，不過一般圖片上傳都在一個大的form作提交驗證，致使form的嵌套，這時表單提交的上傳插件就不使用了。

好在，liteuploader支持這個，單綁定上傳的input就夠了

按插件原生綁定方式，change須要獨立寫，並且事件等都用on鏈式操做（這點還能夠接受）。致使插件不是總體的形式，分離了。

下面是封裝寫法

//使用liteUploader插件
cj.PostImagesFile = function (options) {
    this.setting = {
        url: '/api/Files/PostFile',
        size: '200_100',
        id: 'browseLogo',
        startUpload: function () {
        },
        success: function () {
        },
        error: function () {
        }
    };
    $.extend(this.setting, options);
    this.init();
};

cj.PostImagesFile.prototype = {
    constructor: cj.PostImagesFile,
    init: function () {
        var _this = this;
        var $obj = $('#' + this.setting.id);
        $obj.liteUploader({
            script: this.setting.url,
            params: {
                type: "image"
            },
            singleFileUploads: false
        }).on("lu:success", function (e, response) {
            var json = JSON.parse(response);
            _this.setting.success(json);
        }).on('lu:error', function (e, response) {
            var json = JSON.parse(response);
            _this.setting.error(json);
        });

        $obj.change(function () {
            $obj.data("liteUploader").startUpload();
        });
    }
};

在原生鏈上，寫了個init初始方法，新建對象時，會自動調用init方法，最後把on的事件，調用構造器success,error等返回結果給對外使用。

cj.PostImagesFile =
            new cj.PostImagesFile({
                url: '/api/Files/PostFile',
                size: '200_100',
                id: 'browseLogo',
                startUpload: function () {
                },
                success: function (res) {
                    console.info(res);
                    vm_new.logo(res.data[0]);
                },
                error: function (res) {
                }
            });

只寫了success的返回，其餘方式同理。 vm_new是ko(knockout)的綁定方式

PS：這個異步不能用Promise,Promise方式resolve只能執行一次，當出現第二次上傳同一個控件時，resolve就不能夠執行了。

效果圖