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的嵌套,這時表單提交的上傳插件就不使用了。javascript

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

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

下面是封裝寫法api

//使用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)的綁定方式this

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

效果圖spa

相關文章
相關標籤/搜索