[更新]修改文件上传错误显示

This commit is contained in:
Anyon 2017-09-27 17:09:58 +08:00
parent 062856e47a
commit d1e536df81

View File

@ -176,7 +176,7 @@
alert('Web Uploader 不支持您的浏览器!'); alert('Web Uploader 不支持您的浏览器!');
return; return;
} }
// 文件上传前的检查
WebUploader.Uploader.register({'before-send-file': 'preupload'}, { WebUploader.Uploader.register({'before-send-file': 'preupload'}, {
preupload: function (file) { preupload: function (file) {
var me = this, owner = this.owner, deferred = WebUploader.Deferred(); var me = this, owner = this.owner, deferred = WebUploader.Deferred();
@ -223,11 +223,7 @@
multiple: true, multiple: true,
/*{/if}*/ /*{/if}*/
}, },
accept: { accept: {title: '选择文件', extensions: '{$types}', mimeTypes: '{$mimes}'},
title: '选择文件',
extensions: '{$types}',
mimeTypes: '{$mimes}'
},
formData: {}, formData: {},
/*{if $mode === 'one'}*/ /*{if $mode === 'one'}*/
auto: true, auto: true,
@ -278,6 +274,8 @@
uploaded.call(uploader, {'site_url': fieldata.file.site_url}, fieldata.file); uploaded.call(uploader, {'site_url': fieldata.file.site_url}, fieldata.file);
return true; return true;
} }
// 接收服务器返回的错误消息
fieldata.file.setStatus('error', ret.msg);
return false; return false;
}); });
@ -301,32 +299,29 @@
// 当有文件添加进来时执行负责view的创建 // 当有文件添加进来时执行负责view的创建
function addFile(file) { function addFile(file) {
var $li = $('<li id="' + file.id + '">' + '<p class="title">' + file.name + '</p>' + var $li = $('<li id="' + file.id + '"><p class="title">' + file.name + '</p><p class="imgWrap"></p><p class="progress"><span></span></p></li>'),
'<p class="imgWrap"></p>' + $btns = $('<div class="file-panel"><span class="cancel">删除</span><span class="rotateRight">向右旋转</span><span class="rotateLeft">向左旋转</span></div>').appendTo($li),
'<p class="progress"><span></span></p>' + $prgress = $li.find('p.progress span'), $wrap = $li.find('p.imgWrap'), $info = $('<p class="error"></p>');
'</li>'), var showError = function (code) {
$btns = $('<div class="file-panel">' + var text = '';
'<span class="cancel">删除</span>' + switch (code) {
'<span class="rotateRight">向右旋转</span>' + case 'exceed_size':
'<span class="rotateLeft">向左旋转</span></div>').appendTo($li), text = '文件大小超出';
$prgress = $li.find('p.progress span'), break;
$wrap = $li.find('p.imgWrap'), case 'interrupt':
$info = $('<p class="error"></p>'), text = '上传暂停';
showError = function (code) { break;
var text = ''; case 'http':
switch (code) { case 'server':
case 'exceed_size': case 'abort':
text = '文件大小超出'; text = '上传失败,请重试';
break; break;
case 'interrupt': default:
text = '上传暂停'; text = code;
break; break;
default: }
text = '上传失败,请重试'; $info.text(text).appendTo($li);
break; };
}
$info.text(text).appendTo($li);
};
if (file.getStatus() === 'invalid') { if (file.getStatus() === 'invalid') {
showError(file.statusText); showError(file.statusText);
} else { } else {
@ -334,19 +329,14 @@
$wrap.text('预览中'); $wrap.text('预览中');
uploader.makeThumb(file, function (error, src) { uploader.makeThumb(file, function (error, src) {
if (error) { if (error) {
$wrap.text('不能预览'); return $wrap.text('不能预览');
return;
} }
var img; var img;
if (isSupportBase64) { if (isSupportBase64) {
img = $('<img src="' + src + '">'); img = $('<img src="' + src + '">');
$wrap.empty().append(img); $wrap.empty().append(img);
} else { } else {
$.ajax('{"plugs/file/preview"|url}', { $.ajax('{"plugs/file/preview"|url}', {method: 'post', data: src, dataType: 'json'}).done(function (response) {
method: 'post',
data: src,
dataType: 'json'
}).done(function (response) {
if (response.result) { if (response.result) {
img = $('<img src="' + response.result + '">'); img = $('<img src="' + response.result + '">');
$wrap.empty().append(img); $wrap.empty().append(img);
@ -360,15 +350,13 @@
file.rotation = 0; file.rotation = 0;
$upload.html('开始上传'); $upload.html('开始上传');
} }
// 文件上传状态变化
file.on('statuschange', function (cur, prev) { file.on('statuschange', function (cur, prev) {
if (prev === 'progress') { if (prev === 'progress') {
$prgress.hide().width(0); $prgress.hide().width(0);
} else if (prev === 'queued') { } else if (prev === 'queued') {
$li.off('mouseenter mouseleave'); $li.off('mouseenter mouseleave'), $btns.remove();
$btns.remove();
} }
// 成功
if (cur === 'error' || cur === 'invalid') { if (cur === 'error' || cur === 'invalid') {
showError(file.statusText); showError(file.statusText);
percentages[file.id][1] = 1; percentages[file.id][1] = 1;
@ -377,8 +365,7 @@
} else if (cur === 'queued') { } else if (cur === 'queued') {
percentages[file.id][1] = 0; percentages[file.id][1] = 0;
} else if (cur === 'progress') { } else if (cur === 'progress') {
$info.remove(); $info.remove(), $prgress.css('display', 'block');
$prgress.css('display', 'block');
} else if (cur === 'complete') { } else if (cur === 'complete') {
$li.append('<span class="success"></span>'); $li.append('<span class="success"></span>');
} }
@ -390,8 +377,7 @@
$btns.stop().animate({height: 0}); $btns.stop().animate({height: 0});
}); });
$btns.on('click', 'span', function () { $btns.on('click', 'span', function () {
var index = $(this).index(); switch ($(this).index()) {
switch (index) {
case 0: case 0:
removeFile(file); removeFile(file);
return uploader.removeFile(file); return uploader.removeFile(file);
@ -518,35 +504,29 @@
$placeHolder.addClass('element-invisible'); $placeHolder.addClass('element-invisible');
$statusBar.show(); $statusBar.show();
} }
addFile(file); addFile(file), setState('ready'), updateTotalProgress();
setState('ready');
updateTotalProgress();
}; };
uploader.onfieldequeued = function (file) { uploader.onfieldequeued = function (file) {
fileCount--; fileCount--;
fileSize -= file.size; fileSize -= file.size;
!fileCount && setState('pedding'); !fileCount && setState('pedding');
removeFile(file); removeFile(file), updateTotalProgress();
updateTotalProgress();
}; };
uploader.on('all', function (type) { uploader.on('all', function (type) {
switch (type) { switch (type) {
case 'uploadFinished': case 'uploadFinished':
setState('confirm'); return setState('confirm');
break;
case 'startUpload': case 'startUpload':
setState('uploading'); return setState('uploading');
break;
case 'stopUpload': case 'stopUpload':
setState('paused'); return setState('paused');
break;
} }
}); });
uploader.onError = function (code) { uploader.onError = function (code) {
//alert('Eroor: ' + code); alert('Error: ' + code);
}; };
$upload.on('click', function () { $upload.on('click', function () {