初始化
This commit is contained in:
liut
@@ -0,0 +1,473 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user