//原来的绑定方式
$('#' + 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就不可以执行了。
效果图