oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oneao committed 2026-04-29 21:54:37 +08:00
1 parent 3620369d47
commit 217838c615
11 files changed
+1268 -1022
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/file-preview/index.html
+125 -202
View File
@@ -1,241 +1,164 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>文件预览测试</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>G3File 基础示例</title>
<script type="text/javascript" src="./js/jquery-easyui-1.4/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-easyui-1.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="./g3-file/language.js"></script>
<script type="text/javascript" src="./g3-file/icon.js"></script>
<script type="text/javascript" src="./g3-file/common.js"></script>
<script type="text/javascript" src="./g3-file/index.js"></script>
<script type="text/javascript" src="./g3-file/libs/FileSaver.min.js"></script>
<script type="text/javascript" src="./g3-file/libs/jszip.min.js"></script>
<link rel="stylesheet" href="./g3-file/index.css" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
#app {
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f7fa;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.button-group {
padding: 10px 20px;
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
background: #ffffff;
border-bottom: 1px solid #eef0f2;
display: flex;
gap: 10px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
margin-bottom: 20px;
}
.button-group button {
padding: 8px 16px;
border: none;
border-radius: 4px;
background: #5D87FF;
color: white;
cursor: pointer;
.header h1 {
font-size: 20px;
color: #1f2329;
font-weight: 600;
}
.header p {
font-size: 14px;
color: #646a73;
margin-top: 5px;
}
.button-group button:hover {
background: #4a6fcf;
}
#fileContainer {
flex: 1;
min-height: 0;
.file-container {
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
height: 500px;
}
</style>
</head>
<body>
<div id="app">
<div class="button-group">
<button id="reloadBtn">加载文件组1</button>
<button id="reloadBtn2">加载文件组2</button>
<button id="addFileBtn">添加文件</button>
<button id="clearBtn">清空选择</button>
<button id="destroyBtn">销毁组件</button>
</div>
<div style="height: 600px;width: 1200px;">
<div id="fileContainer"></div>
<div class="container">
<div class="header">
<h1>G3File 文件管理组件</h1>
<p>基础示例 - 支持文件上传、预览、下载、删除等功能</p>
</div>
<div id="fileContainer" class="file-container"></div>
</div>
<script>
$(function () {
// 存储权限信息
let userPermissions = {
approve: true,
edit: true,
rename: true,
copy: true,
move: true,
share: true,
history: true
};
// 模拟 API 请求获取权限
function fetchPermissions() {
return new Promise((resolve) => {
// 模拟 API 请求延迟
setTimeout(() => {
// 模拟从 API 获取的权限数据
const permissions = {
approve: true,
edit: true,
rename: true,
copy: true,
move: true,
share: true,
history: true
};
userPermissions = permissions;
resolve(permissions);
}, 500);
});
}
// 先获取权限，然后初始化组件
fetchPermissions().then(() => {
const file = $('#fileContainer').G3File({
language: 'zh-CN',
previewUrl: 'https://sxox.g3soft.cn:8012/onlinePreview?url=',
data: [
{ name: 'DC2A4692147D10C9C7B48A7EA29BCBA8.jpg', size: 1024000, uploadDate: '2024-01-15T10:30:00', url: 'http://118.89.70.199:9000/test/DC2A4692147D10C9C7B48A7EA29BCBA8.jpg' },
],
uploadConfig: {
aliyun: {
// 模拟获取上传凭证的函数
getUploadToken: function (file) {
return new Promise((resolve) => {
// 模拟 API 请求延迟
setTimeout(() => {
resolve({
uploadUrl: `http://example.com/${file.name}`,
// 其他阿里云上传所需的参数
accessKeyId: 'test-access-key',
accessKeySecret: 'test-secret-key',
bucket: 'test-bucket',
region: 'oss-cn-hangzhou'
});
}, 500);
});
$(function() {
$('#fileContainer').G3File({
language: 'zh-CN',
previewUrl: 'https://sxox.g3soft.cn:8012/onlinePreview?url=',
data: [
{
name: '项目需求文档.pdf',
size: 2048000,
uploadDate: '2024-01-15T10:30:00',
url: 'http://118.89.70.199:9000/test/DC2A4692147D10C9C7B48A7EA29BCBA8.jpg'
},
{
name: '设计稿.png',
size: 1536000,
uploadDate: '2024-01-16T14:20:00',
url: ''
},
{
name: '数据报表.xlsx',
size: 1024000,
uploadDate: '2024-01-17T09:15:00',
url: ''
},
{
name: '会议记录.docx',
size: 512000,
uploadDate: '2024-01-18T16:45:00',
url: 'http://118.89.70.199:9000/test/report.docx'
}
],
uploadConfig: {
aliyun: {
getAliyunKey: function() {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
accessid: 'test-access-key',
callback: '',
dir: 'test/',
expire: Math.floor(Date.now() / 1000) + 3600,
host: 'http://example.com',
policy: 'test-policy',
signature: 'test-signature'
});
}, 500);
});
}
}
},
onUploadBefore: function(pendingFiles) {
return new Promise((resolve) => {
if (confirm('确定上传 ' + pendingFiles.length + ' 个文件吗？')) {
resolve(true);
} else {
resolve(false);
}
});
},
onDeleteBefore: function(files) {
return new Promise((resolve) => {
if (confirm('确定删除 ' + files.length + ' 个文件吗？')) {
resolve(true);
} else {
resolve(false);
}
});
},
customActionMenu: function(file) {
return [
{
title: '审核',
onClick: function(f) {
alert('审核文件: ' + f.name);
}
},
// 自定义上传方法（注释掉以使用阿里云上传）
// customUpload: function(file) {
// return new Promise((resolve, reject) => {
// // 模拟上传延迟
// setTimeout(() => {
// // 模拟上传成功
// resolve({
// url: `http://custom-upload.com/${file.name}`,
// uploadDate: new Date().toISOString()
// });
// // 模拟上传失败
// // reject(new Error('上传失败'));
// }, 1000);
// });
// }
},
onUploadSuccess: function (file) {
console.log('上传成功:', file);
alert('上传成功：' + file.name);
},
onUploadError: function (file, error) {
console.error('上传失败:', file.name, error);
alert('上传失败：' + file.name);
},
onUploadComplete: function (successCount, failCount) {
console.log('上传完成:', successCount, '成功', failCount, '失败');
alert('上传完成：' + successCount + '成功，' + failCount + '失败');
},
globalPermission: {
select: true,
upload: true,
download: true,
delete: true,
view: true
},
onUpload: function (pendingFiles) {
console.log('上传文件:', pendingFiles);
alert('上传功能，共 ' + pendingFiles.length + ' 个文件待上传');
},
onDelete: function (files, callback) {
console.log('删除文件:', files);
if (confirm('确定要删除 ' + files.length + ' 个文件吗？')) {
callback(true);
} else {
callback(false);
{
title: '编辑',
onClick: function(f) {
alert('编辑文件: ' + f.name);
}
}
},
onSelect: function (files) {
console.log('选择文件:', files);
},
getActionMenu: function (file) {
const menuItems = [];
return menuItems;
}
});
$('#reloadBtn').click(function () {
file.setFiles([
{ name: '测试文档1.pdf', size: 2048000, uploadDate: '2024-01-15T10:30:00', url: '' },
{ name: 'test.png', size: 1024000, uploadDate: '2024-01-15T10:30:00', url: 'http://118.89.70.:9000/test/DC2A4692147D10C9C7B48A7EA29BCBA8.jpg' },
{ name: '项目报告.docx', size: 524288, uploadDate: '2024-02-20T14:45:00', url: 'http://118.89.70.199:9000/test/report.docx' },
]);
});
$('#reloadBtn2').click(function () {
file.setFiles([
{ name: '测试文档2.pdf', size: 4096000, uploadDate: '2024-01-15T10:30:00', url: '' },
{ name: '项目报告2.docx', size: 524288, uploadDate: '2024-02-20T14:45:00', url: '' },
{ name: '数据表.xlsx', size: 1572864, uploadDate: '2024-03-01T09:00:00', url: 'http://118.89.70.199:9000/test/data.xlsx' },
{ name: '演示文稿.pptx', size: 3145728, uploadDate: '2024-03-05T16:30:00', url: '' },
]);
});
$('#addFileBtn').click(function () {
file.$btnSelect.click();
});
$('#clearBtn').click(function () {
file.updateState({ selectedFiles: [] });
});
$('#destroyBtn').click(function () {
if (confirm('确定要销毁组件吗？')) {
file.destroy();
$('#fileContainer').html('<p style="text-align:center;padding:50px;color:#999;">组件已销毁</p>');
}
});
];
}
});
});
</script>
</body>
</html>