' +
'
删除' +
'
向右旋转' +
'
向左旋转' ).appendTo($li),
$prgress = $li.find('p.progress span'),
$wrap = $li.find('p.imgWrap'),
$info = $('
'),
showError = function (code) {
switch (code) {
case 'exceed_size':
text = '文件大小超出';
break;
case 'interrupt':
text = '上传暂停';
break;
default:showError
text = '上传失败，请重试';
break;
}
$info.text(text).appendTo($li);
};
if (file.getStatus() === 'invalid') {
showError(file.statusText);
} else {
// @todo lazyload
$wrap.text('预览中');
uploader.makeThumb(file, function (error, src) {
var img;
if (error) {
$wrap.text('不能预览');
return;
}
if (isSupportBase64) {
img = $('
');
$wrap.empty().append(img);
} else {
$.ajax(_DEFALUTS_.serverPreviewPath, {
method: 'POST',
data: src,
dataType: 'json'
}).done(function (response) {
if (response.result) {
img = $('
');
$wrap.empty().append(img);
} else {
$wrap.text("预览出错");
}
});
}
}, thumbnailWidth, thumbnailHeight);
percentages[file.id] = [file.size, 0];
file.rotation = 0;
}
file.on('statuschange', function (cur, prev) {
if (prev === 'progress') {
$prgress.hide().width(0);
} else if (prev === 'queued') {
// $li.off( 'mouseenter mouseleave' );
// $btns.remove();
}
// 成功
if (cur === 'error' || cur === 'invalid') {
//console.log( file.statusText );
showError(file.statusText);
percentages[file.id][1] = 1;
} else if (cur === 'interrupt') {
showError('interrupt');
} else if (cur === 'queued') {
$info.remove();
$prgress.css('display', 'block');
percentages[file.id][1] = 0;
} else if (cur === 'progress') {
$info.remove();
$prgress.css('display', 'block');
} else if (cur === 'complete') {
$prgress.hide().width(0);
$li.append('
');
}
$li.removeClass('state-' + prev).addClass('state-' + cur);
});
$li.off('mouseenter').on('mouseenter', function () {
$btns.stop().animate({ height: 30 });
});
$li.off('mouseleave').on('mouseleave', function () {
$btns.stop().animate({ height: 0 });
});
$btns.off('click').on('click', 'span', function () {
var index = $(this).index(),
deg;
switch (index) {
case 0:
uploader.removeFile(file);
return;
case 1:
file.rotation += 90;
break;
case 2:
file.rotation -= 90;
break;
}
if (supportTransition) {
deg = 'rotate(' + file.rotation + 'deg)';
$wrap.css({
'-webkit-transform': deg,
'-mos-transform': deg,
'-o-transform': deg,
'transform': deg
});
} else {
$wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');
}
});
$li.appendTo($queue);
}
// 负责view的销毁
function removeFile(file) {
var $li = $('#' + file.id);
delete percentages[file.id];
updateTotalProgress();
$li.off().find('.file-panel').off().end().remove();
}
function updateTotalProgress() {
var loaded = 0,
total = 0,
spans = $progress.children(),
percent;
$.each(percentages, function (k, v) {
total += v[0];
loaded += v[0] * v[1];
});
percent = total ? loaded / total : 0;
spans.eq(0).text(Math.round(percent * 100) + '%');
spans.eq(1).css('width', Math.round(percent * 100) + '%');
updateStatus();
}
function updateStatus() {
var text = '', stats;
if (state === 'ready') {
text = '选中' + fileCount + '张图片，共' +
WebUploader.formatSize(fileSize) + '。';
} else if (state === 'confirm') {
stats = uploader.getStats();
if (stats.uploadFailNum) {
text = '已成功上传' + stats.successNum + '张图片，' +
stats.uploadFailNum + '张图片上传失败，
重新上传失败图片或
忽略'
}
} else {
if (uploader) {
stats = uploader.getStats();
text = '共' + fileCount + '张（' +
WebUploader.formatSize(fileSize) +
'），已上传' + stats.successNum + '张';
if (stats.uploadFailNum) {
text += '，失败' + stats.uploadFailNum + '张';
}
} else {
text = '共' + fileCount + '张（' +
WebUploader.formatSize(fileSize) +
'），已存在' + fileCount + '张';
}
}
$info.html(text);
}
function setState(val) {
var file, stats;
if (val === state) {
return;
}
$upload.removeClass('state-' + state);
$upload.addClass('state-' + val);
state = val;
switch (state) {
case 'pedding':
$placeHolder.removeClass('element-invisible');
$queue.hide();
$statusBar.addClass('element-invisible');
uploader.refresh();
break;
case 'ready':
$placeHolder.addClass('element-invisible');
$(_DEFALUTS_.pick2.id).removeClass('element-invisible');
$queue.show();
$statusBar.removeClass('element-invisible');
uploader.refresh();
break;
case 'uploading':
$(_DEFALUTS_.pick2.id).addClass('element-invisible');
$progress.show();
$upload.text('暂停上传');
break;
case 'paused':
$progress.show();
$upload.text('继续上传');
break;
case 'confirm':
$progress.hide();
$(_DEFALUTS_.pick2.id).removeClass('element-invisible');
$upload.text('开始上传');
stats = uploader.getStats();
if (stats.successNum && !stats.uploadFailNum) {
setState('finish');
return;
}
break;
case 'finish':
stats = uploader.getStats();
if (stats.successNum) {
//alert('上传成功');
//parent.abp.notify.success("上传成功！", "提示");
//去掉图片上的进度条
$wrap.find("p.progress").hide();
} else {
// 没有成功的图片，重设
state = 'done';
location.reload();
}
break;
}
updateStatus();
}
uploader.on('uploadSuccess', function (file, response) {
/*if (response.success) {
$("#" + file.id).attr("address", response.result);
}*/
_DEFALUTS_.uploadSuccess&&_DEFALUTS_.uploadSuccess(file,response);
});
uploader.on("uploadAccept", function (object, ret) {
if (ret.success == false) {
console.log(ret.error.message);
return false;
}
});
uploader.on("uploadError", function (file, reason) {
var $li = $('#' + file.id),
$error = $li.find('div.error');
// 避免重复创建
if (!$error.length) {
$error = $('
').appendTo($li);
}
$error.text('上传失败' + reason);
_DEFALUTS_.uploadError && _DEFALUTS_.uploadError(file,reason);
});
uploader.onUploadProgress = function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress span');
$percent.css('width', percentage * 100 + '%');
percentages[file.id][1] = percentage;
updateTotalProgress();
};
uploader.onFileQueued = function (file) {
fileCount++;
fileSize += file.size;
if (fileCount === 1) {
$placeHolder.addClass('element-invisible');
$statusBar.show();
}
addFile(file);
setState('ready');
updateTotalProgress();
};
uploader.onFileDequeued = function (file) {
fileCount--;
fileSize -= file.size;
if (!fileCount) {
setState('pedding');
}
removeFile(file);
updateTotalProgress();
};
uploader.on('all', function (type) {
var stats;
switch (type) {
case 'uploadFinished':
setState('confirm');
break;
case 'startUpload':
setState('uploading');
break;
case 'stopUpload':
setState('paused');
break;
}
});
uploader.onError = function (code) {
var codeMsg=code;
switch(code){
case "Q_EXCEED_NUM_LIMIT": codeMsg="文件数量超出"+fileCount+"个";
break;
case "Q_EXCEED_SIZE_LIMIT":codeMsg="添加的文件总大小超出"+(_DEFALUTS_.fileSizeLimit/1024 * 1024)+"M";
break;
case "Q_TYPE_DENIED": codeMsg = "文件类型不在范围（" + _DEFALUTS_.accept.extensions + "）里";
break;
case 'F_EXCEED_SIZE':
codeMsg = "添加的文件大小超出" + (_DEFALUTS_.fileSingleSizeLimit / 1024 * 1024) + "M";
break;
}
alert('错误: ' + codeMsg);
};
$upload.on('click', function () {
if ($(this).hasClass('disabled')) {
return false;
}
if (state === 'ready') {
uploader.upload();
} else if (state === 'paused') {
uploader.upload();
} else if (state === 'uploading') {
uploader.stop();
}
});
$info.on('click', '.retry', function () {
uploader.retry();
});
$info.on('click', '.ignore', function () {
alert('todo');
});
$upload.addClass('state-' + state);
//updateTotalProgress();
/**
*InitImgList:当已经存在传入的图片时修改结构,初始化图片列表
参数arrImage传入格式如下：[{ "src": "/pic/示例图片1.jpg", "dataSize": "1100" }, { "src": "/pic/示例图片2.jpg", "dataSize": "2000" }]
*/
function InitImgList(arrImage) {
if (arrImage.length) {
$.each(arrImage, function (i, elem) {
$li = $("
![](\"")
删除向右旋转向左旋转
");
$queue.append($li);
});
$placeHolder.addClass("element-invisible");
$statusBar.show();
}
}
}
return ImageUpload;
});
