1、uploader初始化
var uploader = WebUploader.create({
auto: false, //自动上传
server: '/Home/Upload',
swf: '/open/webuploader/Uploader.swf',
pick: '#lot-picker',
//chunked: true, //断点续传-单个默认5M
duplicate: false, //文件去重
prepareNextFile: true, //提前准备下一个文件(可选,单文件不建议开)
//formData: { }, //自定义参数表,每次请求都会发送这些参数
paste: document.body, //启动剪贴板(可选)
dnd: $('#lot-uploader'), //启动拖拽(可选)
fileNumLimit: 5, //文件总数量
fileSingleSizeLimit: 10485760, //单个文件最大值(IIS默认<=4M,可自行设置:httpRuntime的maxRequestLength)
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
2、文件添加时,添加样式和缩略图
uploader.on('fileQueued', function (file) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info info-top">Szie:' + Math.floor(file.size / 1024) + 'kb' + '</div>' +
'<div class="info info-bot">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');
$('#lot-filelist').append($li); //给缩略图添加图片
// 创建缩略图
uploader.makeThumb(file, function (error, src) {
if (error) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr('src', src);
}, 100, 100);
计算文件MD5(可加)
//uploader.md5File(file).then(function (val) {
// console.log('md5:',val,'-',file.name);
//});
});
3、文件上传过程中,进度条实时显示
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress span');
//避免重复创建
if (!$percent.length) {
$percent = $('<p class="progress"><span></span></p>').appendTo($li).find('span');
}
$percent.css('width', percentage * 100 + '%');
});
4、文件上传成功,给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function (file, data) { //上传成功执行的方法
if (data.status) {
$('#' + file.id).addClass('upload-state-done');
} else {
showMsg(file, data.msg);
}
});
5、失败_添加失败处理
uploader.on('error', function (log) {
switch (log) {
case 'F_EXCEED_SIZE':
addMsg('文件10M以内'); break;
case 'Q_EXCEED_NUM_LIMIT':
addMsg('已超最大上传数'); break;
case 'Q_TYPE_DENIED':
addMsg('文件类型不正确'); break;
case 'F_DUPLICATE':
addMsg('文件已经被添加'); break;
default:
addMsg('文件添加失败~'); break;
}
});
6、失败_上传失败处理
uploader.on('uploadError', function (file) {
showMsg(file, '上传失败');
});
7、错误信息
//错误信息显示
function showMsg(file, msg) {
var $li = $('#' + file.id), $error = $li.find('div.error');
//避免重复创建
if (!$error.length) {
$error = $('<div class="error"></div>').appendTo($li);
}
$error.text(msg);
}
//错误信息提示
function addMsg(msg) {
$('#lot-uploader').prepend('<h3 class="temp-log" style="color:red;">' + msg + '</h3>')
setTimeout(function () {
$('.temp-log').remove();
}, 2000);
}