129 lines
4.2 KiB
HTML
129 lines
4.2 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="./custom-file/index.js"></script>
|
|
<link rel="stylesheet" href="./custom-file/index.css" />
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#app {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #f5f7fa;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="app">
|
|
<button id="reloadBtn">重新加载文件</button>
|
|
<button id="reloadBtn2">重新加载文件2</button>
|
|
<button id="toggleSelectBtn">切换第一个文件选中状态</button>
|
|
<button id="getSelectedBtn">获取选中文件</button>
|
|
<button id="togglePreviewBtn">切换第一个文件预览状态</button>
|
|
<button id="getPreviewBtn">获取预览文件</button>
|
|
|
|
<div style="height: 600px;width: 400px;">
|
|
<div id="fileContainer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(function () {
|
|
const file = $('#fileContainer').G3File({
|
|
language: 'zh-CN',
|
|
data: [
|
|
{ name: 'test.jar', size: 1024000, uploadDate: '2024-01-15T10:30:00', url: 'http://118.89.70.199:9000/test/XI26033384.rar' },
|
|
],
|
|
permissions: {
|
|
select: true,
|
|
upload: true,
|
|
download: true,
|
|
delete: true,
|
|
view: true
|
|
},
|
|
onUpload: function () {
|
|
console.log('Upload clicked');
|
|
alert('上传功能');
|
|
},
|
|
onPreview: function (file, isPreview) {
|
|
console.log('预览事件:', file.name, '预览状态:', isPreview);
|
|
if (isPreview) {
|
|
alert('开始预览文件: ' + file.name);
|
|
} else {
|
|
alert('停止预览文件: ' + file.name);
|
|
}
|
|
}
|
|
});
|
|
|
|
$('#reloadBtn').click(function () {
|
|
file.loadFiles([
|
|
{ name: '测试文档1.pdf', uploadDate: '2024-01-15T10:30:00', url: '' },
|
|
{ name: 'test.png', size: 1024000, uploadDate: '2024-01-15T10:30:00', url: 'http://118.89.70.199:9000/test/DC2A4692147D10C9C7B48A7EA29BCBA8.jpg' },
|
|
]);
|
|
});
|
|
|
|
$('#reloadBtn2').click(function () {
|
|
file.loadFiles([
|
|
{ name: '测试文档2.pdf', size: 1024000, uploadDate: '2024-01-15T10:30:00', url: '' },
|
|
{ name: '项目报告2.docx', size: 524288, uploadDate: '2024-02-20T14:45:00', url: '' },
|
|
]);
|
|
});
|
|
|
|
// 测试外部方法：切换选中状态
|
|
$('#toggleSelectBtn').click(function () {
|
|
const allFiles = file.getFiles();
|
|
if (allFiles.length === 0) {
|
|
alert('请先加载文件');
|
|
return;
|
|
}
|
|
// 获取第一个文件的ID并切换选中状态
|
|
const firstFileId = allFiles[0]._id;
|
|
const isSelected = file.toggleSelect(firstFileId);
|
|
console.log('文件', allFiles[0].name, '选中状态:', isSelected);
|
|
});
|
|
|
|
// 测试外部方法：获取选中文件
|
|
$('#getSelectedBtn').click(function () {
|
|
const selectedFiles = file.getSelectedFiles();
|
|
console.log('选中的文件:', selectedFiles);
|
|
alert('选中的文件数量: ' + selectedFiles.length + '\n文件列表: ' + selectedFiles.map(f => f.name).join(', '));
|
|
});
|
|
|
|
// 测试外部方法：切换预览状态
|
|
$('#togglePreviewBtn').click(function () {
|
|
const allFiles = file.getFiles();
|
|
if (allFiles.length === 0) {
|
|
alert('请先加载文件');
|
|
return;
|
|
}
|
|
const firstFileId = allFiles[0]._id;
|
|
const isPreview = file.togglePreview(firstFileId);
|
|
console.log('文件', allFiles[0].name, '预览状态:', isPreview);
|
|
});
|
|
|
|
// 测试外部方法：获取预览文件
|
|
$('#getPreviewBtn').click(function () {
|
|
const previewFiles = file.getPreviewFiles();
|
|
console.log('预览的文件:', previewFiles);
|
|
alert('预览的文件数量: ' + previewFiles.length + '\n文件列表: ' + previewFiles.map(f => f.name).join(', '));
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |