liut
473 lines
16 KiB
HTML
473 lines
16 KiB
HTML
<html>
|
||
|
||
<head>
|
||
<link href="__STATIC__/css/upload.css" rel="stylesheet" type="text/css">
|
||
<script type="text/javascript" src="__STATIC__/js/jquery.js"></script>
|
||
<script type="text/javascript" src="__STATIC__/js/file.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.0/base64.min.js"></script>
|
||
<script type="text/javascript" src="__STATIC__/js/webuploader2.js"></script>
|
||
</head>
|
||
|
||
<body style="overflow:hidden;">
|
||
<div class="f_upb" style="top: 1px;">
|
||
<div class="f_upp">
|
||
<div id="uploader" class="wu-example">
|
||
<div class="statusBar" style="display:none;">
|
||
<div class="btns">
|
||
<div class="fileho">添加文件</div>
|
||
<div id="filePicker2" class="webuploader-container">
|
||
<div class="webuploader-pick">继续添加</div>
|
||
<div id="rt_rt_1es7kh60f1bfi12481v241lk814026"
|
||
style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; overflow: hidden;">
|
||
<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple"
|
||
accept=""><label
|
||
style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
|
||
</div>
|
||
</div>
|
||
<div class="uploadBtn state-pedding">开始上传</div>
|
||
</div>
|
||
</div>
|
||
<div class="queueList">
|
||
<div id="dndArea" class="placeholder">
|
||
<div id="filePicker" class="webuploader-container">
|
||
<div class="webuploader-pick">点击选择文件</div>
|
||
<div id="rt_rt_1es7kh60dsi0109el3h10nf1d961" style="position: absolute; top: 0px; left: 0px; width: 118px; height: 38px; overflow: hidden; bottom: auto; right: auto;">
|
||
<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="">
|
||
<label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
|
||
</div>
|
||
</div>
|
||
<p class="filep">或将文件拖到这里，单次最多可选{$upload_limit}个</p>
|
||
<p class="filep" style="color:red">凡是上传违反国家法律文件,一律封号处理!!!</p>
|
||
</div>
|
||
<ul class="filelist"></ul>
|
||
</div>
|
||
<div class="info"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var isssl = 's';
|
||
var folder_id = '0';
|
||
try {
|
||
folder_id = $("#folder_id", window.parent.document).val(); //取父页面文件夹ID
|
||
}
|
||
catch (err) {
|
||
}
|
||
|
||
var upsizeb = {$upload_rule.upsize_byte};
|
||
var upsize = '{$upload_rule.upsize}';
|
||
var fsizeall = {$upload_rule.fsize_byte};
|
||
var fsizeallb = '{$upload_rule.fsize}';
|
||
|
||
var pgs = 1;
|
||
//上传类型1=头像，2=文件图标
|
||
var getque = '2';
|
||
var uploadError = "未知";
|
||
uppp();
|
||
|
||
function uppp() {
|
||
|
||
var $ = jQuery,
|
||
|
||
$wrap = $('#uploader'),
|
||
|
||
$queue = $('<ul class="filelist"></ul>').appendTo($wrap.find('.queueList')),
|
||
|
||
// 状态栏，包括进度和控制按钮
|
||
$statusBar = $wrap.find('.statusBar'),
|
||
|
||
// 文件总体选择信息。
|
||
$info = $wrap.find('.info'),
|
||
|
||
// 上传按钮
|
||
$upload = $wrap.find('.uploadBtn'),
|
||
|
||
// 没选择文件之前的内容。
|
||
$placeHolder = $wrap.find('.placeholder'),
|
||
|
||
$fileho = $wrap.find('.fileho'),
|
||
|
||
// 添加的文件数量
|
||
fileCount = 0,
|
||
|
||
// 添加的文件总大小
|
||
fileSize = 0,
|
||
|
||
// 优化retina, 在retina下这个值是2
|
||
ratio = window.devicePixelRatio || 1,
|
||
|
||
// 可能有pedding, ready, uploading, confirm, done.
|
||
state = 'pedding',
|
||
percentages = {},
|
||
uploader;
|
||
|
||
if (!WebUploader.Uploader.support()) {
|
||
alert('不支持您的浏览器！请使用360（极速模式），QQ等支持HTML5的浏览器');
|
||
throw new Error('WebUploader does not support the browser you are using.');
|
||
}
|
||
|
||
// 实例化
|
||
uploader = WebUploader.create({
|
||
pick: {
|
||
id: '#filePicker',
|
||
label: '点击选择文件'
|
||
},
|
||
dnd: '#uploader .queueList',
|
||
paste: document.body,
|
||
|
||
runtimeOrder: 'html5',
|
||
|
||
disableGlobalDnd: true,
|
||
|
||
chunked: true, //开启分片上传
|
||
chunkSize: 2 * 1024 * 1024,
|
||
|
||
duplicate: false,
|
||
|
||
server: "{$upload_api|raw}",
|
||
fileVal: 'file',
|
||
|
||
formData: { //自定义参数
|
||
'folder_id': folder_id,
|
||
},
|
||
accept: {
|
||
//指定文件后缀名
|
||
title: '文件上传', //文字描述
|
||
extensions: "*",//允许的文件后缀，不带点，多个用逗号分割
|
||
},
|
||
|
||
threads: 1, //并发
|
||
fileNumLimit: {$upload_limit}, //数量限制
|
||
fileSizeLimit: fsizeall, //1024 M
|
||
fileSingleSizeLimit: upsizeb, //400 M
|
||
});
|
||
|
||
|
||
// 添加“添加文件”的按钮，
|
||
uploader.addButton({
|
||
id: '#filePicker2',
|
||
label: '继续添加'
|
||
});
|
||
|
||
|
||
// 当有文件添加进来时执行
|
||
function addFile(file) {
|
||
|
||
var $li = $('<li id="' + file.id + '">' +
|
||
'<p class="progress"><span></span></p>' +
|
||
'<p class="title"><img src="//static.skpan.cn/user/file/' + getIcon(file.ext) +
|
||
'.png" class="f_img" align="absmiddle">' + file.name + '</p>' +
|
||
'<p class="fsize">' + WebUploader.formatSize(file.size) + '</p>' +
|
||
'<div class="fdecs2"><span class="finfo"></span><span class="fload"></span></div>' +
|
||
'</li>'),
|
||
|
||
$btns = $('<div class="fdecs">' +
|
||
'<span class="cancel">删除</span></div>').appendTo($li),
|
||
$prgress = $li.find('p.progress span'),
|
||
$prgresss = $li.find('span.fload'),
|
||
$finfo = $li.find('span.finfo'),
|
||
//$info = $('<div class="fdecs2"></div>'),
|
||
|
||
showError = function (code) {
|
||
//上传失败
|
||
$btns.css('display', 'block');
|
||
$finfo.text('上传失败');
|
||
$prgress.css({
|
||
'background-color': '#FFF8F0',
|
||
'border': '1px solid #F3DCD1',
|
||
'border-left': '0',
|
||
'width': '100%'
|
||
});
|
||
};
|
||
|
||
if (file.getStatus() === 'invalid') {
|
||
showError(file.statusText);
|
||
} else {
|
||
percentages[file.id] = [file.size, 0];
|
||
file.rotation = 0;
|
||
}
|
||
|
||
file.on('statuschange', function (cur, prev) {
|
||
if (prev === 'progress') {
|
||
//上传后标记
|
||
$prgress.show().width(0 + '%');
|
||
$prgresss.hide();
|
||
} else if (prev === 'queued') {
|
||
$li.off('mouseenter mouseleave');
|
||
$btns.hide();
|
||
}
|
||
|
||
// 成功
|
||
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') {
|
||
percentages[file.id][1] = 0;
|
||
} else if (cur === 'progress') {
|
||
//$info.hide();
|
||
$prgress.css('display', 'block');
|
||
} else if (cur === 'complete') {
|
||
$li.append('<span class="success"></span>');
|
||
//上传成功，清除此条记录
|
||
uploader.removeFile(file);
|
||
}
|
||
|
||
$li.removeClass('state-' + prev).addClass('state-' + cur);
|
||
});
|
||
|
||
$btns.on('click', function () {
|
||
uploader.removeFile(file);
|
||
return;
|
||
});
|
||
|
||
$li.appendTo($queue);
|
||
}
|
||
|
||
// 负责view的销毁
|
||
function removeFile(file) {
|
||
var $li = $('#' + file.id);
|
||
|
||
delete percentages[file.id];
|
||
updateStatus();
|
||
$li.off().find('.file-panel').off().end().remove();
|
||
}
|
||
|
||
function updateStatus() {
|
||
var text = '',
|
||
stats;
|
||
|
||
if (state === 'ready') { } else if (state === 'confirm') {
|
||
stats = uploader.getStats();
|
||
if (stats.uploadFailNum) {
|
||
text = '成功' + stats.successNum + '个，失败' +
|
||
stats.uploadFailNum + '个(' + uploadError + ')，<font class="retry">重新上传</font> 或 <font class="ignore">忽略</font> '
|
||
}
|
||
|
||
} else if (state === 'finish') {
|
||
stats = uploader.getStats();
|
||
text = '已上传' + stats.successNum + '个,(' + WebUploader.formatSize(fileSize) + ')';
|
||
}
|
||
|
||
$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();
|
||
$upload.text('开始上传').removeClass('disabled');
|
||
$fileho.css('display', 'none');
|
||
break;
|
||
|
||
case 'ready':
|
||
$placeHolder.addClass('element-invisible');
|
||
$('#filePicker2').removeClass('element-invisible');
|
||
$queue.parent().addClass('filled');
|
||
$queue.show();
|
||
$statusBar.removeClass('element-invisible');
|
||
uploader.refresh();
|
||
break;
|
||
|
||
case 'uploading':
|
||
$('#filePicker2').addClass('element-invisible');
|
||
$fileho.css('display', 'inline-block');
|
||
$upload.text('正上传中').addClass('disabled');
|
||
break;
|
||
|
||
case 'confirm':
|
||
// 上传结束;
|
||
|
||
stats = uploader.getStats();
|
||
if (stats.successNum && !stats.uploadFailNum) {
|
||
//全部成功，标记
|
||
setState('finish');
|
||
return;
|
||
} else {
|
||
//部分成功
|
||
$('#filePicker2').removeClass('element-invisible');
|
||
$upload.text('开始上传').removeClass('disabled');
|
||
$fileho.css('display', 'none');
|
||
uploader.refresh();
|
||
}
|
||
break;
|
||
case 'finish':
|
||
//全部成功上传
|
||
stats = uploader.getStats();
|
||
if (stats.successNum) {
|
||
//复位
|
||
setState('pedding');
|
||
f_upc();
|
||
return;
|
||
}
|
||
break;
|
||
}
|
||
|
||
updateStatus();
|
||
}
|
||
|
||
|
||
//进度条
|
||
uploader.onUploadProgress = function (file, percentage) {
|
||
var $li = $('#' + file.id),
|
||
$percent = $li.find('.progress span');
|
||
$percents = $li.find('span.fload');
|
||
|
||
$percent.css('width', percentage * 100 + '%');
|
||
var percentagez = parseInt(percentage * 100);
|
||
$percents.text(percentagez + '%');
|
||
percentages[file.id][1] = percentage;
|
||
//updateTotalProgress();
|
||
updateStatus();
|
||
};
|
||
|
||
uploader.onFileQueued = function (file) {
|
||
fileCount++;
|
||
fileSize += file.size;
|
||
|
||
if (fileCount === 1) {
|
||
$placeHolder.addClass('element-invisible');
|
||
$statusBar.show();
|
||
}
|
||
|
||
addFile(file);
|
||
setState('ready');
|
||
updateStatus();
|
||
};
|
||
|
||
uploader.onFileDequeued = function (file) {
|
||
fileCount--;
|
||
fileSize -= file.size;
|
||
|
||
if (!fileCount) {
|
||
setState('pedding');
|
||
}
|
||
|
||
removeFile(file);
|
||
updateStatus();
|
||
|
||
};
|
||
|
||
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('uploadStart',function(file){
|
||
uploader.option('formData',{
|
||
chunks_key:Base64.encode(file.__hash)
|
||
})
|
||
});
|
||
|
||
//前端判断
|
||
uploader.onError = function (code) {
|
||
if (code == 'Q_TYPE_DENIED') {
|
||
$info.html('未开放此格式的文件');
|
||
} else if (code == 'Q_EXCEED_NUM_LIMIT') {
|
||
$info.html('超过单次个数限制，请上传完在添加上传');
|
||
} else if (code == 'Q_EXCEED_SIZE_LIMIT') {
|
||
{eq name="$vip_info.is_vip" value="1"}
|
||
$info.html('尊敬的{$group.group_name}您好，单次总和大小超过了' + fsizeallb);
|
||
{else/}
|
||
$info.html('允许上传小于' + upsize +
|
||
'的文件，<a onclick="window.parent.vip()" href="#"><font>升级VIP 提升容量</font></a>');
|
||
{/eq}
|
||
} else if (code == 'F_DUPLICATE') {
|
||
$info.html('已经上传过或者已选择，忽重复');
|
||
} else if (code == 'F_EXCEED_SIZE') {
|
||
{eq name="$vip_info.is_vip" value="1"}
|
||
$info.html('尊敬的{$group.group_name}您好，允许上传小于' + upsize + '的文件');
|
||
{else/}
|
||
$info.html('允许上传小于' + upsize +
|
||
'的文件，<a onclick="window.parent.vip()" href="#"><font>升级VIP 提升容量</font></a>');
|
||
{/eq}
|
||
} else {
|
||
alert('Eroor: ' + code);
|
||
}
|
||
|
||
};
|
||
|
||
//上传后获取json
|
||
uploader.on('uploadAccept', function (file, response, reject) {
|
||
if (response.status == 0) {
|
||
console.log(response);
|
||
uploadError = response.msg;
|
||
return false;
|
||
}
|
||
else {
|
||
if(response.code == 0){
|
||
uploadError = response.msg;
|
||
return false;
|
||
}
|
||
}
|
||
});
|
||
|
||
|
||
$upload.on('click', function () {
|
||
if ($(this).hasClass('disabled')) {
|
||
return false;
|
||
}
|
||
|
||
if (state === 'ready') {
|
||
uploader.upload();
|
||
}
|
||
});
|
||
|
||
$info.on('click', '.retry', function () {
|
||
uploader.retry();
|
||
});
|
||
|
||
$info.on('click', '.ignore', function () {
|
||
//重置队列
|
||
setState('pedding');
|
||
return;
|
||
});
|
||
|
||
$upload.addClass('state-' + state);
|
||
updateStatus();
|
||
};
|
||
|
||
|
||
//关闭窗口
|
||
function f_upc() {
|
||
var index = parent.layer.getFrameIndex(window.name);
|
||
parent.layer.close(index);
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |