From b3eb99d598110351ad85f716f50a291941d58231 Mon Sep 17 00:00:00 2001
From: Administrator <15274802129@163.com>
Date: Wed, 14 Jan 2026 15:41:59 +0800
Subject: [PATCH] feat(ai): 添加视频播放器功能
---
src/main/resources/templates/febs/views/modules/ai/fileUpload/index.html | 127 ++++++++++++++++++++++++++---------------
1 files changed, 80 insertions(+), 47 deletions(-)
diff --git a/src/main/resources/templates/febs/views/modules/ai/fileUpload/index.html b/src/main/resources/templates/febs/views/modules/ai/fileUpload/index.html
index 74cc6ec..366a18f 100644
--- a/src/main/resources/templates/febs/views/modules/ai/fileUpload/index.html
+++ b/src/main/resources/templates/febs/views/modules/ai/fileUpload/index.html
@@ -47,7 +47,7 @@
</div>
<!-- 操作按钮 -->
- <div class="btn-group" style="display: none;" id="btnGroup">
+ <div class="btn-group" id="btnGroup">
<button class="layui-btn layui-btn-normal" id="startUpload">开始上传</button>
<button class="layui-btn layui-btn-danger" id="cancelUpload">取消上传</button>
</div>
@@ -335,22 +335,55 @@
});
// 点击上传
- uploadArea.addEventListener('click', function() {
- var input = document.createElement('input');
- input.type = 'file';
- input.accept = 'video/*';
- input.onchange = function() {
- if (this.files.length > 0) {
- handleFile(this.files[0]);
- }
- };
- input.click();
+ uploadArea.addEventListener('click', function(e) {
+ // 阻止事件冒泡，避免干扰其他按钮
+ e.stopPropagation();
+ // 确保点击的是上传区域本身，而不是其他元素
+ if (e.target === uploadArea || e.target.classList.contains('upload-icon') || e.target.classList.contains('upload-text')) {
+ console.log('上传区域被点击');
+ var input = document.createElement('input');
+ input.type = 'file';
+ input.accept = 'video/*';
+ input.onchange = function() {
+ if (this.files.length > 0) {
+ console.log('选择了文件:', this.files[0].name);
+ handleFile(this.files[0]);
+ }
+ };
+ input.click();
+ }
});
// 按钮事件 - 使用事件委托确保每次都能正确绑定
- $(document).on('click', '#startUpload', startUpload);
- $(document).on('click', '#cancelUpload', cancelUpload);
- $(document).on('click', '#refreshList', refreshFileList);
+ // 移除旧的事件绑定，避免重复绑定
+ $(document).off('click', '#startUpload');
+ $(document).off('click', '#cancelUpload');
+ $(document).off('click', '#refreshList');
+
+ // 重新绑定事件
+ $(document).on('click', '#startUpload', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('开始上传按钮被点击 - 新绑定');
+ startUpload();
+ });
+
+ // 为取消上传按钮添加更强大的事件绑定
+ $(document).on('click', '#cancelUpload', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('取消上传按钮被点击 - 新事件委托');
+ console.log('按钮状态:', $(this).prop('disabled'));
+ console.log('按钮可见性:', $(this).is(':visible'));
+ cancelUpload();
+ });
+
+ $(document).on('click', '#refreshList', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('刷新列表按钮被点击 - 新绑定');
+ refreshFileList();
+ });
// 初始化文件列表
refreshFileList();
@@ -426,7 +459,7 @@
$('#uploadStatus').text('上传中');
$('#startUpload').prop('disabled', true);
- $('#cancelUpload').prop('disabled', false);
+ $('#cancelUpload').prop('disabled', true);
uploadNextChunk();
}
@@ -531,40 +564,15 @@
// 取消上传
function cancelUpload() {
- console.log('取消上传按钮被点击');
- // 无论之前状态如何，都重置上传状态
- isUploading = false;
-
- // 重置状态
- currentChunk = 0;
- uploadedSize = 0;
+ console.log('取消上传函数被调用');
- // 重置UI显示
- $('#uploadProgress').text('0%');
- $('#uploadStatus').text('等待上传');
- $('#uploadSpeed').text('0KB/s');
- $('#progressFill').css('width', '0%').text('0%');
+ // 显示成功消息
+ layer.msg('上传已取消，页面将刷新', {icon: 1, time: 1000});
- // 重置按钮状态
- $('#startUpload').prop('disabled', false);
- $('#cancelUpload').prop('disabled', true);
-
- // 隐藏相关元素
- $('#fileInfo').hide();
- $('#progressContainer').hide();
- $('#btnGroup').hide();
-
- // 重置文件信息显示
- $('#fileName').text('');
- $('#fileSize').text('');
- $('#chunkCount').text('');
-
- // 重置文件对象
- file = null;
- fileMd5 = '';
- chunks = 0;
-
- console.log('取消上传完成，状态已重置');
+ // 刷新页面
+ setTimeout(function() {
+ location.reload();
+ }, 1000);
}
// 更新进度
@@ -621,7 +629,32 @@
var videoPlayer = document.getElementById('videoPlayer');
var videoSource = document.getElementById('videoSource');
+ // 根据文件扩展名设置正确的MIME类型
+ var extension = fileName.split('.').pop().toLowerCase();
+ var mimeType = 'video/mp4';
+ switch(extension) {
+ case 'avi':
+ mimeType = 'video/x-msvideo';
+ break;
+ case 'mov':
+ mimeType = 'video/quicktime';
+ break;
+ case 'wmv':
+ mimeType = 'video/x-ms-wmv';
+ break;
+ case 'flv':
+ mimeType = 'video/x-flv';
+ break;
+ case 'webm':
+ mimeType = 'video/webm';
+ break;
+ case 'mkv':
+ mimeType = 'video/x-matroska';
+ break;
+ }
+
videoSource.src = '/fileUpload/play/' + encodeURIComponent(fileName);
+ videoSource.type = mimeType;
videoPlayer.load();
videoPlayer.play();
});
--
Gitblit v1.9.1