fix(file-upload): 修复文件上传组件的交互问题

Administrator

4 days ago 059892a0ac18e8c5739b43e02411e4d7dc9cbfdd

fix(file-upload): 修复文件上传组件的交互问题

- 移除按钮组的隐藏样式，确保上传操作按钮始终可见
- 添加事件冒泡阻止机制，防止点击事件冲突
- 实现事件委托方式重新绑定按钮事件，避免重复绑定问题
- 修复取消上传按钮的状态控制逻辑
- 更新上传成功后的页面刷新机制，替换原来的列表刷新方式
- 简化取消上传功能，改为直接页面刷新重置状态
- 添加更多调试日志用于问题排查

 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();
            }
@@ -506,12 +539,15 @@
                    },
                    success: function(response) {
                        if (response.code === 200 || response.success) {
                            layer.msg('文件上传成功', {icon: 1});
                            layer.msg('文件上传成功，页面将刷新', {icon: 1, time: 1000});
                            $('#uploadStatus').text('上传成功');
                            $('#uploadProgress').text('100%');
                            $('#progressFill').css('width', '100%').text('100%');
                            $('#playContainer').show();
                            refreshFileList();
                            
                            // 刷新页面
                            setTimeout(function() {
                                location.reload();
                            }, 1000);
                        } else {
                            layer.msg('文件合并失败: ' + response.message, {icon: 2});
                            $('#uploadStatus').text('上传失败');
@@ -531,40 +567,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);
            }

            // 更新进度