| // 初始化变量
function _initUploadOption() {
// ----------------------------多文件上传----------------
window.$wrap = $(document).find('#uploader'),
// 图片容器
window.$queue = $('<ul class="filelist"></ul>')
.appendTo($wrap.find('.queueList')),
// 添加的文件数量
window.fileCount = 0,
// 添加的文件总大小
window.fileSize = 0,
// 所有文件的进度信息，key为file id
window.percentages = {},
// 状态栏，包括进度和控制按钮
window.$statusBar = $wrap.find('.statusBar'),
// 文件总体选择信息。
window.$info = $statusBar.find('.info'),
// 上传按钮
window.$upload = $(document).find('#saveFile'),
// 关闭按钮
window.$close = $(document).find(".closeBtn"),
// 没选择文件之前的内容。
window.$placeHolder = $wrap.find('.placeholder'),
// 可能有pedding, ready, uploading, confirm, done.
window.state = 'pedding',
// 总体进度条
window.$progress = $statusBar.find('.progress').hide(),
// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,
// 缩略图大小
window.thumbnailWidth = 110 * ratio,
window.thumbnailHeight = 110 * ratio,
window.supportTransition = (function () {
var s = document.createElement('p').style,
r = 'transition' in s ||
'WebkitTransition' in s ||
'MozTransition' in s ||
'msTransition' in s ||
'OTransition' in s;
s = null;
return r;
})(),
// WebUploader实例
window.uploader;
}
// 获取OSS上传key
function signInit(type) {
function var_str() {
$.ajax({
url: "/upload/sign?hosize=&hotype=" + type,
async: false,
success: function(data) {
var data = JSON.parse(data);
host = data.host;
accessid = data.accessid;
policy = data.policy;
signature = data.signature;
callback = data.callback;
dir = data.dir;
fileKey = data.fileKey;
},
error: function(data) {}
});
}
return var_str;
}
// 需要的方法--------
// 当有文件添加进来时执行，负责view的创建
function addFile(file) {
let checkboxhtml = '';
let pichtml = '';
let fileExt = file.ext.toLowerCase();
if(fileExt == 'ppt' || fileExt == 'pptx'){
checkboxhtml = '<p class="isppt">动态PPT<input class="ischeckbox" data-id="' + file.id + '" type="checkbox" /></p>';
}else if (fileExt == "jpg" ||
fileExt == "gif" || fileExt == "jpeg" || fileExt == "png" ||
fileExt == "bmp") {
pichtml = '<span class="rotateRight">向右旋转</span><span class="rotateLeft">向左旋转</span>';
}
var $li = $('<li id="' + file.id + '">' +
'<p class="title">' + file.name + '</p>' +
'<p class="imgWrap"></p>' +
'<p class="progress"><span></span></p>' +
checkboxhtml +
'</li>'),
$btns = $('<div class="file-panel">' +
'<span class="cancel">删除</span>' +
pichtml +
'</div>').appendTo($li),
$prgress = $li.find('p.progress span'),
$wrap = $li.find('p.imgWrap'),
$info = $('<p class="error"></p>'),
showError = function (code) {
switch (code) {
case 'exceed_size':
text = '文件大小超出';
break;
case 'interrupt':
text = '上传暂停';
break;
default:
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) {
if (error) {
$wrap.text('不能预览');
return;
}
var img = $('<img src="' + src + '">');
$wrap.empty().append(img);
}, thumbnailWidth, thumbnailHeight);
window.percentages[file.id] = [file.size, 0, 0];
file.rotation = 0;
}
file.on('statuschange', function (cur, prev) {
console.log('statuschange',cur,prev,file,window.percentages);
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);
window.percentages[file.id][1] = 1;
} else if (cur === 'interrupt') {
showError('interrupt');
} else if (cur === 'queued') {
window.percentages[file.id][1] = 0;
} else if (cur === 'progress') {
$info.remove();
$prgress.css('display', 'block');
} else if (cur === 'complete') {
$li.append('<span class="success"></span>');
}
$li.removeClass('state-' + prev).addClass('state-' + cur);
});
$li.on('mouseenter', function () {
$btns.stop().animate({height: 30});
});
$li.on('mouseleave', function () {
$btns.stop().animate({height: 0});
});
// 是否动态PPT
$li.on('change','.ischeckbox',function (e) {
let _id = $(this).data('id');
console.log('cccc',$(this).prop('checked'))
if($(this).prop('checked') == true){
window.percentages[_id][2] = 1;
}else{
window.percentages[_id][2] = 0;
}
})
$btns.on('click', 'span', function () {
var index = $(this).attr('class'),
deg;
switch (index) {
case 'cancel':
uploader.removeFile(file);
return;
case 'rotateRight':
file.rotation += 90;
break;
case 'rotateLeft':
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 window.percentages[file.id];
updateTotalProgress();
$li.off().find('.file-panel').off().end().remove();
}
function updateTotalProgress() {
var loaded = 0,
total = 0,
spans = $progress.children(),
percent;
$.each(window.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 + '个文件上传失败，<a class="retry" href="#">重新上传</a>失败文件或<a class="ignore" href="#">忽略</a>'
}
} else {
stats = uploader.getStats();
text = '共' + fileCount + '个文件（' +
WebUploader.formatSize(fileSize) +
'），已上传' + stats.successNum + '个文件';
if (stats.uploadFailNum) {
text += '，失败' + stats.uploadFailNum + '个文件';
}
}
$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.parent().removeClass('filled');
$queue.hide();
$statusBar.addClass('element-invisible');
uploader.refresh();
break;
case 'ready':
$placeHolder.addClass('element-invisible');
$('#filedata').removeClass('element-invisible');
$queue.parent().addClass('filled');
$queue.show();
$statusBar.removeClass('element-invisible');
uploader.refresh();
break;
case 'uploading':
$('#filedata').addClass('element-invisible');
$progress.show();
$upload.text('上传中，点击可暂停上传');
break;
case 'paused':
$progress.show();
$upload.text('继续上传');
break;
case 'confirm':
$progress.hide();
$upload.text('开始上传').addClass('disabled');
stats = uploader.getStats();
if (stats.successNum && !stats.uploadFailNum) {
setState('finish');
return;
}
break;
case 'finish':
stats = uploader.getStats();
if (stats.successNum) {
// $("#detailModal").modal('hide');
$('#filedata').html('继续选择');
$('#filedata').removeClass('element-invisible');
$close.removeAttr('disabled');
$upload.html('继续提交');
$upload.removeAttr('disabled').removeClass('disabled');
bootbox.alert('上传完成');
list(params);
} else {
// 没有成功
state = 'done';
alert('error');
location.reload();
}
break;
}
updateStatus();
}
// 上传插件
function initUpload() {
_initUploadOption();
var f_config = {
'title': 'Files',
'extensions': 'xls,xlsx,ppt,pptx,doc,docx,txt,pdf,jpg,gif,jpeg,png,bmp,mp3,mp4',
'mimeTypes': '.xls,.xlsx,.ppt,.pptx,.doc,.docx,.txt,.pdf,.jpg,.gif,.jpeg,.png,.bmp,.mp3,.mp4',
'sizeLimit' : 100,
};
var var_config = signInit('i');
var_config();
var options = {
pick: {
id: "#saveFile",
multiple: true,
},
auto: false, // 自动上传。
swf: log.webupload_swf, // swf文件路径
server: log.oss_geteway, // 文件接收服务端。
formData: {
'url': host,
'key': fileKey,
'policy': policy,
'OSSAccessKeyId': accessid,
'success_action_status': '200', //让服务端返回200,不然，默认会返回204
'callback': callback,
'signature': signature,
'hosize': ''
},
accept: {
title: f_config.title,
extensions: f_config.extensions,
mimeTypes: f_config.mimeTypes
},
fileNumLimit: 50,
fileSingleSizeLimit: f_config.sizeLimit + 'M',
};
console.log('options',options);
uploader = WebUploader.create(options);
// 当添加进队列以后触发
uploader.on('fileQueued', function(file) {
console.log('file1ueued',file);
fileCount++;
fileSize += file.size;
if (fileCount === 1) {
$placeHolder.addClass('element-invisible');
$statusBar.show();
}
let fileExt = file.ext.toLowerCase();
if(
fileExt != "pptx" && fileExt != "ppt" && fileExt != "doc" &&
fileExt != "docx" && fileExt != "xls" && fileExt != "xlsx" &&
fileExt != "txt" && fileExt != "pdf" && fileExt != "jpg" &&
fileExt != "gif" && fileExt != "jpeg" && fileExt != "png" &&
fileExt != "bmp" && fileExt != "mp3" && fileExt != "mp4"
){
$(".saveError").show();
$(".save-error-tip").html(file.name+'不支持上传的文件类型');
$queue.empty();
window.percentages = {};
$placeHolder.removeClass('element-invisible');
fileCount = 0;
fileSize == 0;
return false;
}else{
$(".saveError").hide();
}
addFile(file);
setState('ready');
updateTotalProgress();
});
// 当文件被移除队列后触发
uploader.on('fileDequeued',function (file) {
fileCount--;
fileSize -= file.size;
if (!fileCount) {
setState('pedding');
}
removeFile(file);
updateTotalProgress();
});
// 当 uploader 被重置的时候触发
uploader.on('reset',()=>{
})
// 某个文件开始上传前触发，一个文件只会触发一次。
uploader.on('uploadStart',(file)=>{
// 更新options的formData
console.log('uploadStart')
var var_config = signInit('i');
var_config();
options.formData.url = host;
options.formData.key = fileKey;
options.formData.policy = policy;
options.formData.OSSAccessKeyId = accessid;
options.formData.callback = callback;
options.formData.signature = signature;
// 获取或者设置Uploader配置项。没效果坑货..
// uploader.option({
// formData: options.formData
// })
uploader.options.formData = options.formData
// console.log('get---',uploader.options.formData);
})
/**
* object {Object}
* ret {Object}服务端的返回数据，json格式，如果服务端不是json格式，从ret._raw中取数据，自行解析。
* 当某个文件上传到服务端响应后，会派送此事件来询问服务端响应是否有效。如果此事件handler返回值为false, 则此文件将派送server类型的uploadError事件。
*/
uploader.on('uploadAccept',(object,ret)=>{
// console.log('uploadAccept',object,ret)
// 其他功能需求
});
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.on('uploadProgress', function(file, percentage) {
var $li = $('#'+file.id),
$percent = $li.find('.progress span');
$percent.css( 'width', percentage * 100 + '%' );
percentages[ file.id ][ 1 ] = percentage;
updateTotalProgress();
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function(file, data) {
});
// 文件上传失败，现实上传出错。
uploader.on('uploadError', function(file) {
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on('uploadComplete', function(file) {
});
uploader.on("error", function (type) {
if (type == "F_EXCEED_SIZE") {
bootbox.alert("文件大小不能超过100M");
}else if(type == "Q_TYPE_DENIED"){
bootbox.alert("不支持的文件类型");
} else {
bootbox.alert("上传出错！请检查后重新上传！错误代码"+type);
}
});
$info.on( 'click', '.retry', function() {
uploader.retry();
} );
$info.on( 'click', '.ignore', function() {
// alert( 'todo' );
} );
// 开始上传
$upload.on('click', function () {
if ($(this).hasClass('disabled')) {
return false;
}
$upload.html('保存中...');
// $upload.attr('disabled','disabled');
$close.attr('disabled','disabled');
pid = $("#pid").val();
key = $("#key").val();
isopen = $("#isopen").val();
if (state === 'ready') {
uploader.upload();
} else if (state === 'paused') {
uploader.upload();
} else if (state === 'uploading') {
uploader.stop();
}
});
}
| 
博客提及页面文件和js文件执行，展示最终效果图，还指出上传文件时存在坑，即每上传一个需更新formData，按官方文档操作未生效。
扫一扫
2275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
