241 lines
7.6 KiB
HTML
241 lines
7.6 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
<html>
|
|
|
|
<head>
|
|
<title>文件预览测试</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;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#app {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #f5f7fa;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.button-group {
|
|
padding: 10px 20px;
|
|
background: #ffffff;
|
|
border-bottom: 1px solid #eef0f2;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.button-group button {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: #5D87FF;
|
|
color: white;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.button-group button:hover {
|
|
background: #4a6fcf;
|
|
}
|
|
|
|
#fileContainer {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
</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>
|
|
</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);
|
|
});
|
|
}
|
|
},
|
|
// 自定义上传方法（注释掉以使用阿里云上传）
|
|
// 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);
|
|
}
|
|
},
|
|
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> |