feat(ai): 添加产品亮点视频关联功能

Administrator

4 days ago fe5d383211fffdb51b695557f27141d5416a6b33

 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();
                                });