webuploader一个页面中多实例使用示例
在使用webuploader上传文件过程中，如果同一个页面存在多个上传区域，如一个页面中需要传营业执照和资质证书，营业执照资质证书都允许上传多张图片，可以参考本示例代码
本示例依赖webuploader相关js及css，基础应用不在本例代码，本例代码提供更优雅的复用示例，只是一个思路，大部分可直接复制使用，特殊需求可根据此代码修改
本示例依赖webuploader相关js及css，基础应用不在本例代码，本例代码提供更优雅的复用示例，只是一个思路，大部分可直接复制使用，特殊需求可根据此代码修改
页面js
(function () {
var $WebUpload = function (_uploader, url) {
this._uploader = _uploader;
this.serverurl = url;
this.imageExtensions = 'gif,jpg,jpeg,bmp,png';
this.mimeTypes ='image/gif,image/jpg,image/jpeg,image/bmp,image/png';
// 缩略图大小
this.ratio = window.devicePixelRatio || 1,
this.thumbnailWidth = 160 * this.ratio;
this.thumbnailHeight = 120 * this.ratio;
this.fileSizeLimit = 10 * 1024 * 1024;
this.fileNumLimit = 5;
this.fileSingleSizeLimit = 10 * 1024 * 1024;
this.swfurl = BASE_URL + '/js/Uploader.swf';
this.custsuccess = null;
this.custerror = null;
this.fileCount = 0;
this.WebUploader;
};
$WebUpload.prototype = {
/**
* 初始化webUploader
*/
init: function () {
var uploader = this.create();
this.bindEvent(uploader);
return uploader;
},
/**
* 创建webuploader对象
*/
create: function () {
var webUploader = WebUploader.create({
pick: $('._picker', $(this._uploader))[0],
//dnd: $('._queueList', $(this._uploader))[0],
// 这里如果要一个页面多个实例，有bug
// https://github.com/fex-team/webuploader/issues/81#issuecomment-228499631
accept: {
title: 'Images',
extensions: this.imageExtensions,
mimeTypes: this.mimeTypes
},
// swf文件路径
swf: this.swfurl,
disableGlobalDnd: true,
duplicate: false,//不允许上传同一个文件
auto: true,//自动上传
server: this.serverurl,
fileNumLimit: this.fileNumLimit,
fileSingleSizeLimit: this.fileSingleSizeLimit * 1024 * 1024 // 3 M
});
return webUploader;
},
/**
* 绑定事件
*/
bindEvent: function (bindedObj) {
var me = this;
bindedObj.on('fileQueued', function (file) {
var $li = $('' +
'
' +
//'' + file.name + '' +
' '
),
$img = $li.find('img');
// $list为容器jQuery实例
$($('._queueList', $(me._uploader))[0]).append($li);
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
// bindedObj.makeThumb(file, function (error, src) {
// if (error) {
// $img.replaceWith('不能预览');
// return;
// }
// $img.attr('src', src);
// }, me.thumbnailWidth, me.thumbnailHeight);
me.fileCount++;
if (me.fileNumLimit == me.fileCount) {
$($('._picker', $(me._uploader))[0]).css("display", "none");
}
});
// 文件上传过程中创建进度条实时显示。
bindedObj.on('uploadProgress', function (file, percentage) {
var $li = $('#' + $(me._uploader).attr("id") + "_" + file.id),
$percent = $li.find('.progress span');
// 避免重复创建
if (!$percent.length) {
$percent = $('
')
.appendTo($li)
.find('span');
}
$percent.css('width', percentage * 100 + '%');
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
bindedObj.on('uploadSuccess', function (file, response) {
$('#' + $(me._uploader).attr("id") + "_" + file.id).addClass('upload-state-done');
bindedObj.makeThumb(file, function (error, src) {
$img = $('#thumb_' + $(me._uploader).attr("id") + "_" + file.id);
if (error) {
$img.replaceWith('不能预览');
return;
}
$img.attr('src', src);
}, me.thumbnailWidth, me.thumbnailHeight);
if ('function' == typeof me.custsuccess) {
me.custsuccess(file, response);
}
});
// 文件上传失败，显示上传出错。
bindedObj.on('uploadError', function (file, reason) {
var $li = $('#' + $(me._uploader).attr("id") + "_" + file.id),
$error = $li.find('div.error');
// 避免重复创建
if (!$error.length) {
$error = $('').appendTo($li);
}
$error.text('上传失败,' + reason);
});
// 其他错误
bindedObj.on('error', function (type) {
console.log("webuploadertool error type:" + type);
var message = "";
if ("Q_EXCEED_NUM_LIMIT" == type) {
message = "最多只允许上传" + me.fileNumLimit + "张图片";
} else if ("F_EXCEED_SIZE" == type) {
message = "单张只允许上传" + me.fileSingleSizeLimit + "M以内的图片";
} else if ("Q_TYPE_DENIED" == type) {
message = "只允许上传类型为" + me.imageExtensions + "的图片";
}
if ('function' == typeof me.custerror) {
me.custerror(message);
}
});
// 完成上传完了，成功或者失败
bindedObj.on('uploadComplete', function (file) {
$('#' + $(me._uploader).attr("id") + "_" + file.id).find('.progress').remove();
});
}
};
window.$WebUpload = $WebUpload;
}());